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


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 相关文章推荐
JavaScript XML实现两级级联下拉列表
Nov 10 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
3种js实现string的substring方法
Nov 09 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
python原始套接字编程示例分享
2014/02/21 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python如何省略括号方法详解
2020/03/21 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
python批量生成条形码的示例
2020/10/10 Python
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
廉洁校园实施方案
2014/05/25 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
求职意向书范本
2015/05/11 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL