首頁 > 開發者 > JavaScript
先給個官方例子。可以先弄出來看看效果
html
複製代碼 代碼如下:
<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="shortcut icon" href="/media/img/favicon.ico">
<link rel="stylesheet" type="text/css"
href="./tabs-no-images.css"/>
</head>
<body><!-- tabs -->
<ul id="tabui" class="cs-tabs">
<li><a id="t1" href="#tab1">Tab 1</a></li>
<li><a id="t2" href="#tab2">Second tab</a></li>
<li><a id="t3" href="#tab3">A ultra long third tab</a></li>
</ul>
<!-- panes -->
<div id="tabpans" class="cs-panes">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
viverra, leo sit amet auctor fermentum, risus lorem posuere
tortor, in accumsan purus magna imperdiet sem.
</p>
<p>
Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas
facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus
nibh metus, faucibus quis, semper ut, dignissim id, diam.
</p>
</div>
<div>
<p>
Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui,
molestie sed, tristique sit amet, blandit eu, turpis. Mauris
hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed
molestie dui quam vitae dui.
</p>
<p>
Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget
tortor. Maecenas id augue. Vivamus interdum nulla ac
dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus
eget dui volutpat molestie.
</p>
</div>
<div>
<p>
Maecenas at odio. Nunc laoreet lectus vel ante. Nullam
imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a,
nisl. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</p>
<p>
In sed dolor. Etiam eget quam ac nibh pharetra
adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu
mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis
nisi. Vivamus at enim. Integer semper imperdiet
massa. Vestibulum nulla massa, pretium quis, porta id,
vestibulum vitae, velit.
</p>
</div>
</div>
<!-- activate tabs with JavaScript -->
<script>
$(function() {
// :first selector is optional if you have only one tabs on the page
$(".cs-tabs:first").tabs(".cs-panes:first > div");
});
</script>
</body>
</html>
css
複製代碼 代碼如下:
/* root element for tabs */
ul.cs-tabs {
margin:0 !important;
padding:0;
height:30px;
border-bottom:1px solid #666;
}
/* single tab */
ul.cs-tabs li {
float:left;
padding:0;
margin:0;
list-style-type:none;
}
/* link inside the tab. uses a background image */
ul.cs-tabs a {
float:left;
font-size:13px;
display:block;
padding:5px 30px;
text-decoration:none;
border:1px solid #666;
border-bottom:0px;
height:18px;
background-color:#efefef;
color:#777;
margin-right:2px;
position:relative;
top:1px;
outline:0;
-moz-border-radius:4px 4px 0 0;
}
ul.cs-tabs a:hover {
background-color:#F7F7F7;
color:#333;
}
/* selected tab */
ul.cs-tabs a.on {
background-color:#ddd;
border-bottom:1px solid #ddd;
color:#000;
cursor:default;
}
/* tab pane */
.cs-panes div {
display:none;
border:1px solid #666;
border-width:0 1px 1px 1px;
min-height:150px;
padding:15px 20px;
background-color:#ddd;
}
該功能是通過jqueryObject.tabs()方法來實現的
$(".cs-tabs:first").tabs(".cs-panes:first > div");
官方是用的class，我對div都加了id。
$("#tabui").tabs("#tabpans >div");
$("#tabui").tabs("#tabpans>div",{event:'click',tab:'p',effect: 'default',current:'on'});
這兩個同同$(".cs-tabs:first").tabs(".cs-panes:first > div");的效果
是不是很強大呢。
下面就以上配置參數說明描述如下：
| 屬性名稱 | 預設 值 | 描述 |
|---|---|---|
| current | 'current' | CSS類名當前活躍的選項卡。 |
| effect | 'default' | 效果被用來當點擊一個選項卡。 這可以 戲劇性地改變這種行為的選項卡。 這是 可用的內建的效果:
你也可以 讓自己的效果 。 |
| event | 'click' | 指定事件一個選項卡時開啟。 預設情況下,這個 發生在當使用者單擊選項卡。 另一個有效值 是 “mouseover” 和 ‘dblclick' 。 |
| fadeInSpeed | 200 | 自從1.0.1。 唯一可用一起使用時 與“fade”效應。 該屬性定義了加快( 毫秒)開啟的面板中顯示其內容。 |
| fadeOutSpeed | 0 |
自從1.1.0版。 唯一可用一起使用時 與“fade”效應。 該屬性定義了加快( 毫秒)開啟窗格中隱藏了它的內容。 一個積極的 這裡的價值將導致“crossfade”作用 示範了 這裡 。 |
| history | false | 自從1.2.0 。 瀏覽器的支援 “後退按鈕”,這樣當使用者點擊後退或前進 按鈕開啟相應的選項卡。 要求 這個 曆史工具 是 包括在你的頁面。 |
| initialIndex | 0 |
指定選項,最初開啟當頁面 載入。 這將自動觸發一個 點擊 事件 為選項卡指定在本 財產。 指定 null 或者一個負數這裡 不會觸發 點擊 事件在頁面載入 導致所有選項卡最初將關閉。 |
| rotate | false | 自從1.1.0版。 當最後一個選項卡是開放和 這個 next() 調用API調用,然後選項卡將 從頭開始,當第一個選項卡是開放和 這個 上一頁() 調用調用選項卡將提前 最後一個選項卡。 這是證明 在 這裡 。 |
| tabs | 'a' | 一個選取器進行元素,用作標籤在根 元素。 如果沒有發現然後的直接子根 元素用於為選項卡。 |
| 事件 | 觸發時間 |
|---|---|
| onBeforeClick | 點擊一個標籤之前。 第二個參數是指數 被單擊的選項卡。 |
| onClick | 點擊後一個選項卡。 第二個參數是指數 點擊的選項。 |
| 方法 | 傳回值 | 描述/例子 |
|---|---|---|
| click(index) | API |
啟用選項卡中指定的參數。 參數可以是 要麼是 整數 數字指定標籤指數 (從0開始),或者當選項卡 一個 標記,它 可以 href 屬性作為 援引 字串 。 |
| destroy() | API |
自從1.2.3 完全刪除現有的標籤 執行個體。 |
| getConf() | Object | 自從1.0.1。 返回設定物件 標籤的執行個體。 這個對象可以被修改, 變化是動態地反映在行為上的標籤。 |
| getCurrentPane() | jQuery |
返回當前面板作為jQuery對象。 |
| getCurrentTab() | jQuery |
返回當前標籤作為一個jQuery對象。 |
| getIndex() | integer | 返回當前選項卡指數。 |
| getPanes() | jQuery |
返回jQuery對象窗格作為。 |
| getTabs() | jQuery |
返回標籤作為一個jQuery對象。 |
| next() | API |
前進到下一個選項卡。 |
| prev() | API |
進步到以前的選項卡。 |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
