jquery編寫選項卡Tab頁跳轉功能
阿新 • • 發佈：2019-02-19
前面寫過用JavaScript原生程式碼寫選項卡tab頁的跳轉的方法，在後來的學習工作過程中，發現並不是很實用，這裡分享一個jquery的寫法，比較簡單，也比較容易修改套用，適合初學者學習和使用。
1、首先是選單tab標籤
使用ul-li列出選單tab，並設定ul的class為st-menu-tab
2、然後是內容頁<ul class="st-menu-tab"> <li class="on">目錄</li> <li>筆記</li> <li>答疑</li> <li>評論</li> </ul>
由於內容頁內容比較自由，可以裝下很多東西，所以應該考慮用div來承載，並設定大的div容器的class為st-menu-info
3、選單和內容都有之後，就應該先把頁面美化一下了<div class="st-menu-info"> <div class="on"> <ul> <li class="sec-title"> <span>第1章 簡介</span> </li> </ul> <ul> <li class="sec-title"> <span>第2章 企業核心競爭力詳解</span> </li> </ul> <ul> <li class="sec-title"> <span>第3章 員工管理</span> </li> </ul> </div> <div class="hide"><h2>筆記</h2></div> <div class="hide"><h2>答疑</h2></div> <div class="hide"><h2>評論</h2></div> </div>
設計頁面的css程式碼，程式碼如下：
4、頁面設計好之後，就到了主要的壓軸戲了<style type="text/css"> * { margin: 0; padding: 0; } .st-menu-tab { display: block; height:30px; width: 350px; color: #fd9c15; } .st-menu-tab li { cursor:pointer; float:left; list-style:none; height:28px; line-height:28px; background-color: #A7FADE; border:1px solid #fd9c15; margin:0 3px; border-bottom:none; display:inline-block; width:60px; text-align: center; } .st-menu-tab li.on { border:2px solid #fd9c15; border-bottom: 2px solid #7FFFD4; font-size: 20px } .st-menu-info { height:200px; width: 350px; line-height: 25px; border:2px solid #fd9c15; border-top:none padding:5px; background-color: #7FFFD4; } .hide {display: none;} </style>
這是使用jquery寫的，那麼就要先引用jquery，然後是跳轉程式碼
<script type="text/javascript" src="script/jquery-3.1.1.js"></script>
<!--tab頁跳轉-->
<script type="text/javascript">
$(document).ready(function (){
var stMenuTab = $(".st-menu-tab li"),
stMenuInfo= $(".st-menu-info div");
stMenuTab.click(function() {
var i = $(this).index();
$(this).addClass('on').siblings().removeClass('on');
stMenuInfo.eq(i).show().siblings().hide();
});
});
</script>
6、完整程式碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.st-menu-tab {
display: block;
height:30px;
width: 350px;
color: #fd9c15;
margin-left: 50px;
margin-top: 50px;
}
.st-menu-tab li {
cursor:pointer;
float:left;
list-style:none;
height:28px;
line-height:28px;
background-color: #A7FADE;
border:1px solid #fd9c15;
margin:0 3px;
border-bottom:none;
display:inline-block;
width:60px;
text-align: center;
}
.st-menu-tab li.on {
border:2px solid #fd9c15;
border-bottom: 2px solid #7FFFD4;
font-size: 20px
}
.st-menu-info {
margin-left: 50px;
height:200px;
width: 350px;
line-height: 25px;
border:2px solid #fd9c15;
border-top:none padding:5px;
background-color: #7FFFD4;
}
.hide {display: none;}
.sec-title {
list-style:none;
}
</style>
</head>
<body>
<ul class="st-menu-tab">
<li class="on">目錄</li>
<li>筆記</li>
<li>答疑</li>
<li>評論</li>
</ul>
<div class="st-menu-info">
<div class="on">
<ul>
<li class="sec-title">
<span>第1章 簡介</span>
</li>
</ul>
<ul>
<li class="sec-title">
<span>第2章 企業核心競爭力詳解</span>
</li>
</ul>
<ul>
<li class="sec-title">
<span>第3章 員工管理</span>
</li>
</ul>
</div>
<div class="hide"><h2>筆記</h2></div>
<div class="hide"><h2>答疑</h2></div>
<div class="hide"><h2>評論</h2></div>
</div>
<script type="text/javascript" src="script/jquery-3.1.1.js"></script>
<!--tab頁跳轉-->
<script type="text/javascript">
$(document).ready(function (){
var stMenuTab = $(".st-menu-tab li"),
stMenuInfo= $(".st-menu-info div");
stMenuTab.click(function() {
var i = $(this).index();
$(this).addClass('on').siblings().removeClass('on');
stMenuInfo.eq(i).show().siblings().hide();
});
});
</script>
</body>
</html>