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 相关文章推荐
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
js+css实现红包雨效果
Jul 12 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python 爬虫图片简单实现
2017/06/01 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Django Rest framework频率原理与限制
2019/07/26 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
Python排序函数的使用方法详解
2020/12/11 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
学校课外活动总结
2014/05/08 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
军训个人总结
2015/03/03 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
毕业班工作总结
2015/08/10 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技