0

我正在将 jquery 选项卡实现到我的网站中。我有标签功能并且可以正常工作，但是我无法让任何 .ui-tabs-selected 类正常工作。我总是以白色背景结束。我在下面包含了我的代码。

---------------------HTML 代码-------------------------- --------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Operational Services</title>
<script type="text/javascript" src="../../javaScript/jquery-1.9.1.js"></script> <!--Jquery library *****DO NOT EDIT*****-->
<script type="text/javascript" src="../../javaScript/jquery-ui-1.10.2/ui/jquery-ui.js"></script> <!--Jquery UI Library library *****DO NOT EDIT*****-->
<script type="text/javascript" src="../../javaScript/jquery-ui-1.10.2/ui/jquery.ui.tabs.js"></script> <!--Jquery UI Library library *****DO NOT EDIT*****-->
<script type="text/javascript" src="../../javaScript/jquery-ui-1.10.2/ui/jquery.ui.core.js"></script> <!--Jquery UI Library library *****DO NOT EDIT*****-->
<script type="text/javascript" src="../../javaScript/jquery-ui-1.10.2/ui/jquery.ui.widget.js"></script> <!--Jquery UI Library library *****DO NOT EDIT*****-->
<script type="text/javascript" src="../../javaScript/himLinks.js"></script><!--Links for top menu bar-->
<link rel="stylesheet" type="text/css" href="../../css/layout.css" /><!--Style Sheet for RCO Website layout-->
<link rel="stylesheet" type="text/css" href="../../css/IndexLayout.css" /><!--Style Sheet for top A-Z Index-->

<script type="text/javascript">
$(document).ready(
  function() {
    $('#tabNavigation').tabs();
  }
);
</script>

</head>

<body>
    <div id="wrapper">
        <div id="header" class="himCoding">
            <a href="#" onclick="himHome()" id="clickHIM"></a>
        </div><!-- Closes Header-->

        <iframe class="nav" src="../himNavigation/himNav.html" height="25px" width="910px" frameborder="0" scrolling="no"></iframe>

        <div id="title" class="himOperations">
          <img src="../../GlobalImages/IndexTitles/HIMcodingHome.png" alt="HIM Operations Heading with Intermountian Logo" />
        </div> 
        <!--Closses title-->

        <div id="tabNavigation">
            <ul>
                <li><a href="#tmpTab-1"><span>How To</span></a></li>
                <li><a href="#tmpTab-2"><span>A</span></a></li>
                <li><a href="#tmpTab-3"><span>B</span></a></li>
                <li><a href="#tmpTab-4"><span>C</span></a></li>
                <li><a href="#tmpTab-5"><span>D</span></a></li>
                <li><a href="#tmpTab-6"><span>E</span></a></li>
                <li><a href="#tmpTab-7"><span>F</span></a></li>
                <li><a href="#tmpTab-8"><span>G</span></a></li>
                <li><a href="#tmpTab-9"><span>H</span></a></li>
                <li><a href="#tmpTab-10"><span>I</span></a></li>
                <li><a href="#tmpTab-11"><span>J</span></a></li>
                <li><a href="#tmpTab-12"><span>K</span></a></li>
                <li><a href="#tmpTab-13"><span>L</span></a></li>
                <li><a href="#tmpTab-14"><span>M</span></a></li>
                <li><a href="#tmpTab-15"><span>N</span></a></li>
                <li><a href="#tmpTab-16"><span>O</span></a></li>
                <li><a href="#tmpTab-17"><span>P</span></a></li>
                <li><a href="#tmpTab-18"><span>Q</span></a></li>
                <li><a href="#tmpTab-19"><span>R</span></a></li>
                <li><a href="#tmpTab-20"><span>S</span></a></li>
                <li><a href="#tmpTab-21"><span>T</span></a></li>
                <li><a href="#tmpTab-22"><span>U</span></a></li>
                <li><a href="#tmpTab-23"><span>V</span></a></li>
                <li><a href="#tmpTab-24"><span>W</span></a></li>
                <li><a href="#tmpTab-25"><span>X</span></a></li>
                <li><a href="#tmpTab-26"><span>Y</span></a></li>
                <li><a href="#tmpTab-27"><span>Z</span></a></li>
            </ul>
            <div id="tmpTab-1" class="indexBorder"><!--How Tab-->
                <p>To view a specific topic, select the letter above that corresponds with the first letter of the desired topic. E.g., Display Screen select the letter “D” You may also search a topic or phrase by using the search field in the top right hand corner of this page.

</p>
            </div>
            <div id="tmpTab-2" class="indexBorder"><!--A Tab-->
                <p>A</p>
            </div>
            <div id="tmpTab-3" class="indexBorder"><!--B Tab-->
                <p>B</p>
            </div>
            <div id="tmpTab-4" class="indexBorder"><!--C Tab-->
                <p>C</p>
            </div>
            <div id="tmpTab-5" class="indexBorder"><!--D Tab-->
                <p>D</p>
            </div>
            <div id="tmpTab-6" class="indexBorder"><!--E Tab-->
                <p>E</p>
            </div>
            <div id="tmpTab-7" class="indexBorder"><!--F Tab-->
                <p>F</p>
            </div>
            <div id="tmpTab-8" class="indexBorder"><!--G Tab-->
                <p>G</p>
            </div>
            <div id="tmpTab-9" class="indexBorder"><!--H Tab-->
                <p>H</p>
            </div>
            <div id="tmpTab-10" class="indexBorder"><!--I Tab-->
                <p>I</p>
            </div>
            <div id="tmpTab-11" class="indexBorder"><!--J Tab-->
                <p>J</p>
            </div>
            <div id="tmpTab-12" class="indexBorder"><!--K Tab-->
                <p>K</p>
            </div>
            <div id="tmpTab-13" class="indexBorder"><!--L Tab-->
                <p>L</p>
            </div>
            <div id="tmpTab-14" class="indexBorder"><!--M Tab-->
                <p>M</p>
            </div>
            <div id="tmpTab-15" class="indexBorder"><!--N Tab-->
                <p>N</p>
            </div>
            <div id="tmpTab-16" class="indexBorder"><!--O Tab-->
                <p>O</p>
            </div>
            <div id="tmpTab-17" class="indexBorder"><!--P Tab-->
                <p>P</p>
            </div>
            <div id="tmpTab-18" class="indexBorder"><!--Q Tab-->
                <p>Q</p>
            </div>
            <div id="tmpTab-19" class="indexBorder"><!--R Tab-->
                <p>R</p>
            </div>
            <div id="tmpTab-20" class="indexBorder"><!--S Tab-->
                <p>S</p>
            </div>
            <div id="tmpTab-21" class="indexBorder"><!--T Tab-->
                <p>T</p>
            </div>
            <div id="tmpTab-22" class="indexBorder"><!--U Tab-->
                <p>U</p>
            </div>
            <div id="tmpTab-23" class="indexBorder"><!--V Tab-->
                <p>V</p>
            </div>
            <div id="tmpTab-24" class="indexBorder"><!--W Tab-->
                <p>W</p>
            </div>
            <div id="tmpTab-25" class="indexBorder"><!--X Tab-->
                <p>X</p>
            </div>
            <div id="tmpTab-26" class="indexBorder"><!--Y Tab-->
                <p>Y</p>
            </div>
            <div id="tmpTab-27" class="indexBorder"><!--Z Tab-->
                <p>Z</p>
            </div>

        </div><!--Closes DIV tabNavigation-->


        </div><!-- Closes Wrapper-->
</body>

</html>

----------------------------------------END HTML 代码-------- ----------------------

--------------------------CSS------------------------ ------------------------------

.indexBorder{
    padding: 5px 5px 5px 5px;
    border:1px solid gray;
    width: 870px;
    margin-left:auto;
    margin-right:auto;

}

#tabNavigation{
    font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
    font-size:12px;
    width:910px;

}



#tabNavigation ul{
    list-style:none;
    padding:0;
    margin-left:7px;
    margin-right:auto;
    margin-top:5px;
    height:22px;
    font-size:12px;

}

#tabNavigation ul li{
    float:left;
    margin-left:4px;
    min-width:12px;
    min-height:18px;
    position:relative;
    border: solid 1px;
    background-image:url(../../pastrain/images/tab.png);
    background-position:bottom;
}

#tabNavigation ul li a{
     display: block;
    padding: 0 9px;
    text-decoration:none;

}

#tabNavigation ul li .ui-tabs-selected{
    background:red;
}

#tabNavigation ul li .ui-tabs-selected a{
    color:white;
}

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

------------------JavaScript----------------- ----------------------------

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

任何想法将不胜感激。

4

2 回答 2

1

看起来您缺少 jquery-ui CSS。把它放在你的头部：

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

这将使用 jQuery UI 平滑 CSS 主题设置标签的样式。如果要覆盖所选选项卡的背景颜色，可以执行以下操作：

#tabNavigation ul li.ui-tabs-selected {
    background-color:red !important;
    background-image: none !important;
}
于 2013-04-09T21:50:45.370 回答
1

从类声明中删除空格

#tabNavigation ul li.ui-tabs-selected{
                    ^
    background:red;
}
于 2013-04-09T21:52:06.173 回答