Linux教程網 >> Linux編程 >> Linux編程 >> 簡單的jQuery選項卡插件

簡單的jQuery選項卡插件

日期：2017/3/1 10:30:49 编辑：Linux編程

其實像這類選項卡的插件網上也很多，只是個人覺得自己弄一個更好，畢竟自己弄的東西，自己修改起來也輕松。

原理其實也是很簡單的，關鍵在於樣式的定義。

原本想直接使用jquery的 ui，無奈懶得理，感覺jquery ui很強大，但是用起來也很麻煩，要引用的樣式也多。主要是樣式不好修改。

並且我也只想使用選項卡的功能，何必整這麼多樣式呢。最主要的還是不好修改樣式。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
a {
text-decoration: none;
}
ul, li, p {
list-style-type: none;
margin: 0px;
padding: 0px;
font-size: 12px;
}
#tabs {
width: 600px;
border: solid 1px #dddddd;
margin: 50px auto;
padding: 5px;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
#tabs ul.tabs_header {
display: block;
position: relative;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 1px solid #aaaaaa;
background-color: #cccccc;
padding: 5px 5px 0px;
clear: both;
height: 26px;
line-height: 26px;
}
#tabs ul.tabs_header li {
border: solid 1px #d3d3d3;
border-bottom: 0 none !important;
float: left;
list-style: none outside none;
margin: 0px 5px;
position: relative;
top: 1px;
height: 24px;
/*此處要加上背景顏色，否則ie6下沒有邊框,（奇怪）有時在ie6下邊框會不出現，剛剛又試了了一下居然又不出現問題了*/
background-color: #F2F2F2;
/*圓角樣式，較新版本的浏覽器才支持，ff8.0支持，ie只有ie9支持*/
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding: 0px 5px;
}
#tabs .tabs_header li a {
color: #333;
}
#tabs .tabs_header li.hover {
border: solid 1px #AAAAAA;
background-color: #E4E4E4;
}
#tabs .tabs_header li.active {
padding-bottom: 1px;
margin-bottom: 0px;
border: solid 1px #AAAAAA;
background-color: #FFFFFF;
}
#tabs div.tabs_content {
border: solid 1px #AAAAAA;
padding: 10px;
border-top: none;
overflow: hidden;
}
</style>
</head>
<body>
<div id="tabs">
<ul class="tabs_header">
<li><a href="###">選項卡一</a></li>
<li><a href="###">選項卡二</a></li>
<li><a href="###">選項卡三</a></li>
</ul>
<div class="tabs_content">
<p>
這是選項卡一的內容？<br />
這是選項卡一的內容？<br />
這是選項卡一的內容？<br />
這是選項卡一的內容？<br />
這是選項卡一的內容？<br />
這是選項卡一的內容？<br />
這是選項卡一的內容？
</p>
</div>
<div class="tabs_content">
<p>
這是選項卡二的內容？<br />
這是選項卡二的內容？<br />
這是選項卡二的內容？<br />
這是選項卡二的內容？<br />
這是選項卡二的內容？<br />
這是選項卡二的內容？<br />
這是選項卡二的內容？
</p>
</div>
<div class="tabs_content">
<p>
這是選項卡三的內容？<br />
這是選項卡三的內容？<br />
這是選項卡三的內容？<br />
這是選項卡三的內容？<br />
這是選項卡三的內容？<br />
這是選項卡三的內容？<br />
這是選項卡三的內容？
</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
<script type="text/javascript">
(function ($) {
$.fn.tabs = function () {
var content = this.find("div");
var list = this.find("ul.tabs_header").find("li");
content.hide();
content.eq(0).show();
list.eq(0).addClass("active");
list.each(function (i) {
$(this).bind({
click: function () {
list.removeClass("active");
content.hide();
content.eq(i).css("display", "");
$(this).addClass("active");
},
mousemove: function () {
$(this).addClass("hover");
},
mouseout: function () {
$(this).removeClass("hover");
}
});
});
}
})(jQuery);
</script>
</body>
</html>