tabs jquery.tools

最新推荐文章于 2025-08-07 21:48:39 发布

原创最新推荐文章于 2025-08-07 21:48:39 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript tab jquery.tools 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用 jQuery 和 CSS 实现选项卡效果。通过 jQuery 的 tabs 方法可以轻松地为页面元素添加选项卡行为，并通过 CSS 样式美化这些选项卡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要导入jquery.tools.min.js库和jQuery库

$(function() { 
    // setup ul.tabs to work as tabs for each div directly under div.panes 
   $("ul.tabs").tabs("div.panes > div", { initialIndex: 1 });//设置
});

div+css:

<li>

</li>

<li>

</li>

</ul>

<div>

</div>

<div>

</div>

css:

.box {

background-color: #fcfcfc;

display: block;

zoom: 1;

padding-bottom: 12px;

}

/* root element for tabs */

ul.tabs {

list-style: none;

margin: 0 0 5px 0 !important;

padding:0;

border-bottom: 1px solid #666;

height: 30px;

}

ul {

line-height: 20px;

}

/* single tab */

ul.tabs li {

float: left;

text-indent: 0;

padding: 0;

margin: 0 !important;

list-style-image: none !important;

}

/* link inside the tab. uses a background image */

ul.tabs a {

background: url(../images/blue.png) no-repeat -420px 0;

font-size: 11px;

display: block;

height: 30px;

line-height: 30px;

width: 134px;

text-align: center;

text-decoration: none;

color: #333;

padding: 0px;

margin: 0px;

position: relative;

top: 1px;

}

ul.tabs a:active {

outline: none;

}

/* when mouse enters the tab move the background image */

ul.tabs a:hover {

background-position: -420px -31px;

color: #fff;

}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */

ul.tabs a.current,

ul.tabs a.current:hover,

ul.tabs li.current a {

background-position: -420px -62px;

cursor: default !important;

color: #000 !important;

}