2

我是 jQuery 新手，所以对于一些琐碎的问题，我深表歉意。

我正在尝试编写一个简单的选项卡式网页。除了选定的选项卡不会更改为选定的选项卡颜色/文本外，一切正常。我有一个用于控制活动/选定选项卡的 CSS。它适用于悬停（选项卡更改为悬停颜色）。但是在单击选项卡后，它会返回到未选择的颜色。

我没有使用默认的 jqueryui.css，因为我正在尝试自己构建和学习东西。但在这里我很难过。我尝试将 .ui-tabs-selected 和 .ui-state-active 的各种变体添加到我的 css 中，但无济于事。

使用 chrome 中的代码检查器，我看到 jquery 应用了样式 ui-state-active 和 ui-tabs-selected。但是如何在 css 中指定它们被激活呢？

谢谢！

以下是代码片段：

html:

<html>
<head>
    <title>Patient Records Dashboard</title>
<link rel="stylesheet" type="text/css" href="css/tabs2.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/tables.css" media="screen">

</head>
<body>
  <div id="tabbed_box_1" class="tabbed_box">
   <div class="tabbed_area">
     <h4>My title</h4>
       <div id="tabs">
        <ul class="tabs">
           <li><a href="#tab1" >A</a></li>
           <li><a href="#tab2" >B</a></li>
           <li><a href="#tab3" >C</a></li>
           <li><a href="#tab4" >D</a></li>
        </ul>
                <div id="tab1_content" class="content">
                   <p>This is the text for tab 1</p>
                </div>
                <div id="tab2_content" class="content">
                    <p>This is the text for tab 2</p>
                </div>

                <div  id="tab3_content" class="content">
                     <p>This is the text for tab 3</p>
                </div>

                <div  id="tab4_content" class="content">
                    <p>This is the text for tab 4</p>
                </div>
        </div>
   </div>    <!- End of tabbed_area->
</div> <!– End of tabbed_box_1 –&gt;
<script type="text/javascript" src="js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript" ></script>
<script type="text/javascript">

    $(document).ready(function() {
        $("#tabs").tabs();
    });

</script>
</body>
</html>

CSS：

body {
    background-color:#687f93;
    margin:40px;
}

#tabbed_box {
    margin: 0px auto 0px auto;
    width:300px;
}

.tabbed_box h4 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:23px;
    color:#ffffff;
    letter-spacing:-1px;
    margin-bottom:10px;
}
.tabbed_box h4 small {
    color:#e3e9ec;
    font-weight:normal;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    position:relative;
    top:-4px;
    left:6px;
    letter-spacing:0px;
}

.tabbed_area {
    border:1px solid #494e52;
    background-color:#748593;
    padding:8px;
}

ul.tabs {
    margin:0px; padding:0px;
}
ul.tabs li {
    list-style:none;
    display:inline;
}

ul.tabs li a {
    background-color:#464c54;
    color:#ffebb5;
    padding:8px 14px 8px 14px;
    text-decoration:none;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-transform:uppercase;
    border:1px solid #464c54;
    background-image:url(../images/tab_off.jpg);
    background-repeat:repeat-x;
    background-position:bottom;
}
ul.tabs li a:hover {
    background-position: -420px -31px;
    color:#fff;
    background-color:#2f343a;
    border-color:#2f343a;
}
ul.tabs li a.current, ul.tabs li a.current:hover, ul.tabs li.current a, .ui-tabs-nav li.ui-state-active, .ui-state-active, .ui-tabs-selected {
    background-color:#ffffff;
    color:#282e32;
    border:1px solid #464c54;
    border-bottom: 1px solid #ffffff;
    background-image:url(../images/tab_on.jpg);
    background-repeat:repeat-x;
    background-position: -420px -62px;
}

.content {
    background-color:#ffffff;
    padding:10px;
    border:1px solid #464c54;
    background-image:url(../images/content_bottom.jpg);
    background-repeat:repeat-x;
    background-position:bottom;
}      

ul.tabs {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}

.content ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.content ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:15px;
    padding-bottom:15px;
    font-size:13px;
}
.content ul li a {
    text-decoration:none;
    color:#3e4346;
}
.content ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.content ul li:last-child {
    border-bottom:none;
}

.ui-tabs-hide { display:none; }
4

2 回答 2

5

添加到 CSS

ul.tabs li.ui-state-active,ul.tabs li.ui-tabs-selected { your styling }
ul.tabs li.ui-tabs-active a, ul.tabs li.ui-tabs-selected a{ your styling }

在 HTML 更改中

id="tab1_content" to id="tab1"
id="tab2_content" to id="tab2"
id="tab3_content" to id="tab3"
id="tab4_content" to id="tab4"

在您的 CSS 代码中，所有样式都应用于a>> ul.tabs li abutui-state-active并且ui-tabs-selected您应用于li, not的样式a。这就是你看不到它的原因。

于 2012-12-04T20:30:04.190 回答
3

就我而言（jquery 1.10.2），这是有效的：

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { your code}
于 2014-04-11T17:04:15.263 回答