JS實現橫向與豎向兩個選項卡Tab聯動的方法
更新時間：2015年09月27日 11:25:54 作者：企鵝
這篇文章主要介紹了JS實現橫向與豎向兩個選項卡Tab聯動的方法,涉及JavaScript遍歷及動態(tài)修改頁面元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS實現橫向與豎向兩個選項卡Tab聯動的方法。分享給大家供大家參考。具體如下：
這是一款橫向、豎向聯動的選項卡，其卡片內容是一樣的，只不過多了一個操作途徑，當點擊一個選項卡的時候，另一個選項卡同樣會指示出當的選項卡位置，也就是兩者的功能是相同的，很巧妙的布局方法。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-hx-sx-tab-ld-demo/
具體代碼如下：
<!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程序設計有所幫助。
相關文章
使用JS打開圖片另存為對話框一直都是網頁應用中不可缺少的一部分，本人有些好奇，于是搜集整理了一些實現代碼，不知道符不符合大眾的口味，在此班門弄斧了，需要的朋友可以了解下2012-12-12
iScroll 4 這個版本完全重寫了iScroll這個框架的原始代碼。這個項目的產生完全是因為移動版webkit瀏覽器（諸如iPhone，iPad，Android 這些系統(tǒng)上廣泛使用）。下面這篇文章主要介紹了利用iscroll4實現輪播圖效果的方法教程,需要的朋友可以參考下。2017-01-01
一篇文章弄懂javascript中的執(zhí)行棧與執(zhí)行上下文
這篇文章主要給大家介紹了關于javascript中執(zhí)行棧與執(zhí)行上下文的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用javascript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
本文主要介紹了webpack中使用Eslint的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要為大家詳細介紹了js實現鼠標移動到圖片產生遮罩效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了JS獲取地址欄參數的兩種方法(原生、vue),文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-07-07
本文通過實例給大家介紹給before和after偽元素設置js效果的方法，對js偽元素相關知識感興趣的朋友一起學習吧2015-12-12
本篇文章主要介紹了JavaScript數組和對象的復制的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
es6新增加了一個運算符,叫做擴展運算符,這個運算符用在數組前面,會把數組展開變成各個獨立的值,這篇文章主要給大家介紹了關于ES6擴展運算符的相關資料,需要的朋友可以參考下2021-07-07
FF IE兼容性的修改小結，大家以后在javascript的編寫過程中需要注意下。2009-09-09