全面解析标签页的切换方式


Posted in Javascript onAugust 21, 2016

标签页的切换方式如下所示:

1、控制tab的显示与隐藏

2、tab不切换,数据加载

控制tab的显示与隐藏

前端脚本:

1、jquery实现:

$(function(){
$(".sdkj-tabs li").click(function() {
$(this).addClass("on").siblings().removeClass("on");
var index=$(".sdkj-tabs li").index(this);
$(".cont-tabs>div").eq(index).show().siblings().hide();
});
});

引入jquery文件,代码简洁

jquery文件较大,浏览器不兼容

2、js 实现

function selectTab(showContent,selfObj){
var tab = document.getElementById("sdkj-tabs").getElementsByTagName("li");
var tablength = tab.length;
for(i=0; i<tablength; i++){
tab[i].className = "";
}
selfObj.className = "on";
// 标签页切换
for(i=0; j=document.getElementById("cont-tab"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}

无需引入jquery文件

代码量大,需每个标签添加函数及ID

3、插件实现

var tabs=function(){
function tag(name,elem){
return (elem||document).getElementsByTagName(name);
}
//获得相应ID的元素
function id(name){
return document.getElementById(name);
}
function first(elem){
elem=elem.firstChild;
return elem&&elem.nodeType==1? elem:next(elem);
}
function next(elem){
elem=elem.nextSibling;
while(elem){
if(elem.nodeType==1){
return elem;
}
else{
elem=elem.nextSibling;
}
} 
}
function child(elem){
var arrays = new Array();
var array_int=0;
var elem_child=first(elem);
for(array_int=0;elem_child;array_int++){
//console.log("elem:"+elem);
arrays[array_int]=elem_child;
elem_child=next(elem_child);
} 
return arrays;
}
return {
set:function(elemId,tabId){
var elem=tag("li",id(elemId));
var tabs=child(id(tabId));
var listNum=elem.length;
var tabNum=tabs.length;
console.log(tabs);
for(var i=0;i<listNum;i++){
elem[i].onclick=(function(i){
return function(){
for(var j=0;j<3;j++){
if(i==j){
tabs[j].style.display="block";
elem[j].className="on";
}
else{
tabs[j].style.display="none"; 
elem[j].className=" ";
}
}
}
})(i)
}
}
}
}();
tabs.set("sdkj-tabs","cont-tabs");//执行

无需引入jquery文件,只需添加父元素ID

以上所述是小编给大家介绍的全面解析标签页的切换方式的全部叙述,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
JS获取时间的方法
Jan 21 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 #Javascript
JS实现图片局部放大或缩小的方法
Aug 20 #Javascript
JS获取及验证开始结束日期的方法
Aug 20 #Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 #Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 #Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 #Javascript
JS实现漂亮的时间选择框效果
Aug 20 #Javascript
You might like
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python序列化pickle模块使用详解
2020/03/05 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
四年的个人工作自我评价
2013/12/10 职场文书
公司离职证明标准样本
2014/10/05 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
金砖之国观后感
2015/06/11 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL