JS实现横向与竖向两个选项卡Tab联动的方法


Posted in Javascript onSeptember 27, 2015

本文实例讲述了JS实现横向与竖向两个选项卡Tab联动的方法。分享给大家供大家参考。具体如下:

这是一款横向、竖向联动的选项卡,其卡片内容是一样的,只不过多了一个操作途径,当点击一个选项卡的时候,另一个选项卡同样会指示出当的选项卡位置,也就是两者的功能是相同的,很巧妙的布局方法。

运行效果截图如下:

JS实现横向与竖向两个选项卡Tab联动的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡Tab联动</title>
<style type="text/css">
body{text-align:center;margin:0;padding:0;font-size:12px;}
div,form,img,ul,ol,li,dl,dt,dd{margin:0;padding:0;border:0;}
h1,h2,h3,h4,h5,h6,p,table,td{margin:0;padding:0;font-size:12px;}
li{list-style:none;}
#layout{width:500px;margin:10px auto;}
#tabnav{width:80px;float:left;}
#tabnav li{float:left;width:70px;height:23px;line-height:23px;cursor:pointer;border:1px solid #ccc;margin:2px 0 0 0;display:inline;color:#333;}
#tabnav li.current{color:#f60;font-weight:bold;}
#tab{width:400px;height:235px;float:right;}
#tab ul{width:400px;height:24px;}
#tab li{float:left;width:70px;height:23px;line-height:23px;cursor:pointer;border:1px solid #ccc;margin:0 1px 0 0;display:inline;background:#333;color:#fff;}
#tab li.current{background:#f60;font-weight:bold;}
#tab .tabcon{float:left;width:398px;height:208px;display:none;border:1px solid #ccc;}
#tab .block{display:block;}
</style>
</head>
<body>
<div id="layout">
 <ul id="tabnav">
  <li onclick="go_to(1);" class="current">最新精华帖</li>
  <li onclick="go_to(2);">最新帖子</li>
  <li onclick="go_to(3);">最旧帖子</li>
  <li onclick="go_to(4);">新最帖子</li>
  <li onclick="go_to(5);">旧最帖子</li>
 </ul>
 <div id="tab">
  <ul id="tabnav02">
   <li onclick="go_to(1);" class="current">最新精华帖</li>
   <li onclick="go_to(2);">最新帖子</li>
   <li onclick="go_to(3);">最旧帖子</li>
   <li onclick="go_to(4);">新最帖子</li>
   <li onclick="go_to(5);">旧最帖子</li>
  </ul>
  <div id="tabcon_1" class="tabcon block">
   1
  </div> 
  <div id="tabcon_2" class="tabcon">
   2
  </div> 
  <div id="tabcon_3" class="tabcon">
   3
  </div> 
  <div id="tabcon_4" class="tabcon">
   4
  </div> 
  <div id="tabcon_5" class="tabcon">
   5
  </div>  
  <script type="text/javascript">
  <!--
  var h=document.getElementById("tabnav").getElementsByTagName("li");
  var d=document.getElementById("tabnav02").getElementsByTagName("li");
  function go_to(s){
   for(var i=1;i<=h.length;i++){
    if(s==i){
    h[i-1].className="current";
    d[i-1].className="current";
    document.getElementById("tabcon_"+i).className="tabcon block";
    }
    else{
    h[i-1].className="";
    d[i-1].className="";
    document.getElementById("tabcon_"+i).className="tabcon";
    }
   }
  }
  //-->
  </script>
 </div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
asp知识整理笔记3(问答模式)
Sep 27 #Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 #Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 #Javascript
AngularJS基础教程之简单介绍
Sep 27 #Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 #Javascript
浅谈javascript的Touch事件
Sep 27 #Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 #Javascript
You might like
十天学会php之第六天
2006/10/09 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
php解决安全问题的方法实例
2019/09/19 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
js实现文字截断功能
2016/09/14 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
jQuery实现滑动开关效果
2020/08/02 jQuery
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
Python查看多台服务器进程的脚本分享
2014/06/11 Python
20招让你的Python飞起来!
2016/09/27 Python
Python3 replace()函数使用方法
2018/03/19 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
文案策划专业自荐信
2014/07/07 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书