html 切换状态分栏

一个自己的分栏工具，可以快速创建分栏效果。
HTML：

<div class="g-header"><!-- 导航栏 --><div class="g-nav"><div class="g-wrap"><ul class="g-nav-list"><li ><span id="doing">分栏一</span></li><li class="selected"><span id="end">分栏二</span></li></ul></div></div>
</div>

css:

.g-header{background-color:#fff;position:relative;z-index:3;_zoom:1;
}.g-nav {height: 39px;border-bottom: 1px solid #d5d5d5;box-shadow: 0 1px 3px 0px rgba(160,160,160,0.2);
}.g-nav-list {width: 100%;display: box;display: -webkit-box;display: -moz-box;
}.g-nav-list li {position: relative;text-align: center;box-flex: 1;-webkit-box-flex: 1;-moz-box-flex: 1;
}.g-nav-list  span {display: inline-block;margin: 0 auto;width: 100%;line-height: 37px;text-align: center;color: #666666;
}.g-nav-list .selected{border-bottom: 2px solid #db3652
}.g-nav-list .selected span {width: 100%;color: #db3652;line-height: 38px;
}

js:

$.fn.toolBar =  function changeBar(firstAction,sectionAction){<!--firstAction事件-->$("#doing").click(function(){var index = $(".g-nav-list").find("li[class=selected]").index();if(index == 0)return;changeBtnState();if(firstAction){firstAction();}});<!--sectionAction事件-->$("#end").click(function(){var index = $(".g-nav-list").find("li[class=selected]").index();if(index == 1)return;changeBtnState();if(sectionAction){sectionAction();}});
}<!--切换按钮状态-->
function changeBtnState(){$(".g-nav-list li").each(function(index){if($(this).attr("class")=="selected"){$(this).attr("class","none");}else{$(this).attr("class","selected");}});
}

调用方式：

$().toolBar(function action_doing(){//分栏一事件},function action_end(){//分栏二事件});

效果图：

完整例子：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width"><style type="text/css">*{margin: 0;padding: 0;}ul >li{list-style-type: none;}.g-header{background-color:#fff;position:relative;z-index:3;_zoom:1;}.g-nav {height: 39px;border-bottom: 1px solid #d5d5d5;box-shadow: 0 1px 3px 0px rgba(160,160,160,0.2);}.g-nav-list {width: 100%;display: box;display: -webkit-box;display: -moz-box;}.g-nav-list li {position: relative;text-align: center;box-flex: 1;-webkit-box-flex: 1;-moz-box-flex: 1;}.g-nav-list  span {display: inline-block;margin: 0 auto;width: 100%;line-height: 37px;text-align: center;color: #666666;}.g-nav-list .selected{border-bottom: 2px solid #db3652}.g-nav-list .selected span {width: 100%;color: #db3652;line-height: 38px;}</style>
</head>
<body>
<div class="g-header"><!-- 导航栏 --><div class="g-nav"><div class="g-wrap"><ul class="g-nav-list"><li ><span id="doing">分栏一</span></li><li class="selected"><span id="end">分栏二</span></li></ul></div></div>
</div>
<script src="jquery.min.js"></script>
<script src="js.js"></script>
<script>$().toolBar(function action_doing(){//分栏一事件alert("分栏一事件");},function action_end(){//分栏二事件alert("分栏二事件");});
</script>
</body>
</html>

html 切换状态分栏相关推荐

手机wps取消不等宽分栏_如何取消分栏 - 卡饭网
Word 2007中取消分栏的技巧 Word 2007中取消分栏的技巧前面我们了解了在Word2007中分栏的设置,相信很多朋友已经学会了,而如果想要对网上下载的分栏文档中进行取消,该怎么办呢?下面 ...
android 界面分栏,华为Mate10怎么分屏？华为Mate10/10 Pro分栏分屏模式开启教程
想一边看电影一边和好友聊天?开启分屏模式,在屏幕中打开两个窗口,同时显示并运行两个应用程序. . 华为Mate10/10 Pro分栏分屏模式开启教程指关节启动分屏: 打开支持分屏的应用后,使用单指关 ...
ActiveReports 报表应用教程 (4)---分栏报表
在 ActiveReports 中可以实现分栏报表布局样式,可以设置横向分栏.纵向分栏,同时进行分栏和分组设置,统计分栏分组的小计.合计等.在商业报表系统中常见的分栏报表有商品标签.员工工卡.条码打印 ...
word 分栏后转html,分栏怎么让两边一样怎样让word文档分栏而顺序不变
word分栏后两侧高度不一样,如何调整? 在电脑桌面里找到需要编辑的文档,并右键单击文档将它打开. 打开文档之后,在工具栏里面选择页面布局,并点击分栏,将文档里面的内容分栏. 点击插入,将插入改为改写 ...
常见的预设分栏包括_计算机应用基础_实训项目二Word综合应用
. 专业学习资料 . 实训项目二 Word 综合应用示例实训项目二 Word 综合应用实训满分 20 分 . 以日常应用为基础 , 设计一个综合运用 Word 基本操作技能解决实际问题的文档 . ...
史上最完美的Android沉浸式状态导航栏攻略
前言最近我在小破站开发一款新App,叫高能链.我是一个完美主义者,所以不管对架构还是UI,我都是比较抠细节的,在状态栏和导航栏沉浸式这一块,我还是踩了挺多坑,费了挺多精力的.这次我将我踩坑,适配各机 ...
常见的预设分栏包括_智慧树知到青铜器类型学黑龙江联盟单元测试答案
关注公众号[帅搜]即可免费查询答案支持:大学网课,智慧树,知到,超星,尔雅,学通,选修课,,外语类,财会类,建筑类,职业资格,,类,外贸类,计算机类等:是一个料下载与在线系统.,是各类考生顺利通过的 ...
Word中分隔符分页符分栏符换行符分节符的用法
在写论文时,论文格式要求目录需要用"Ⅰ.Ⅱ.Ⅲ.-"作为页码,正文要用"1.2.3.-"作为页码.而有的用户此时就要将目录存为一个单独的文件,再设置不同的页码格 ...
XWPFDocument word导出相关（分栏，纸张大小，页面排版，段落字体大小）
改造了一个word导出功能,用到了之前没用到过的冷门方法,我当时百度找方法的时候也是很绝望,就是很冷门,有的博客看到关键地方,还就要钱了,所以我要在这里记录一下,省的以后我忘了,重蹈覆辙,另外也是希望 ...

html 切换状态分栏

html 切换状态分栏相关推荐

最新文章

热门文章