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


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 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
Vue分页组件实例代码
Apr 17 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 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
咖啡语言
2021/03/03 咖啡文化
PHP 进程锁定问题分析研究
2009/11/24 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php无序树实现方法
2015/07/28 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python解析nginx日志文件
2015/05/11 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
教师求职自荐书
2014/06/14 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
公务员政审材料范文
2014/12/23 职场文书
费城故事观后感
2015/06/10 职场文书
离职证明格式样本
2015/06/12 职场文书
对讲机的最大通讯距离是多少
2022/02/18 无线电