jquery - CSS无法在jQuery Tabs系统中工作

我正在我的网站上工作，现在正在使用选项卡，问题出在它的CSS上。

多数民众赞成我的jQuery代码：

$(function() {
$( "#tabs" ).tabs();

// fix the classes
$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
  .removeClass( "ui-corner-all ui-corner-top" )
  .addClass( "ui-corner-bottom" );

// move the nav to the bottom
$( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" );
});

多数民众赞成在CSS文件：

    #box1 {
    margin-bottom: 25px;
    background: #FFFFFF url(images/homepage13.jpg) no-repeat left top;
}
#box1-ing {
    margin-bottom: 25px;
}
#box1-ing .content {
    padding: 17px;
    color: #4D5E5F;
}
#box1 .content {
    min-height: 110px;
    padding: 17px;
    background: url(images/homepage14.jpg) no-repeat right bottom;
    color: #4D5E5F;
}

#box1 h1 { color: #275157; }
#box1-ing h1 { color: #275157; }

#box1 a { color: #56773D; }
#box1-ing a { color: #56773D; }

#box1 .link1 { color: #FFFFFF; }
#box1-ing .link1 { color: #FFFFFF; }

#box1 .tabs {
    clear: both;
    height: 40px;
    background: url(images/homepage17.jpg) no-repeat right top;
}
#box1-ing .tabs {
    clear: both;
    height: 40px;
    background: url(images/homepage17.jpg) no-repeat;
}

#box1 .tabs ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: normal;
}
#box1-ing .tabs ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: normal;
}

#box1 .tabs li { float: left; }
#box1-ing .tabs li { float: left; }

#box1 .tabs a {
    display: block;
    float: left;
    width: 132px;
    height: 32px;
    padding: 111px 0px 0px 28px;
    background: url(images/homepage16.jpg) no-repeat left top;
    text-decoration: none;
    font-weight: bold;
    color: red;
}
#box1-ing .tabs a {
    display: block;
    float: left;
    width: 132px;
    height: 32px;
    padding: 8px 0px 0px 28px;
    background: url(images/homepage16.jpg) no-repeat left top;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
}

多数民众赞成在我的HTML：

 <div id="box1">
  <div id="tabs" class="tabs-bottom">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div class="content"><img src="images/homepage12.jpg" alt="" width="117"  height="117" class="left" />
    <div id="tabs-1">
      <p></p>
    </div>
    <div id="tabs-2">
      <p></p>
    </div>
    <div id="tabs-3">
      <p></p>
      <p>/p>
    </div>
    <p style="margin-left: 142px; margin-top :10px;"><a href="#" class="link1">Read Full Story</a></p>
        </div>
      </div>
    </div>

现在的问题是，css无法在“ a”标签上使用，所有其他html文件都获取了css文件，而不是tabs div中的选项卡名称。

box1-ing选项卡在不同的页面中，并且这些选项卡在按我的需要工作。

box1-ing html代码：

<div id="box1-ing">
                    <?php if(in_array($include_file, $home) ){ ?>
                        <div class="tabs">
                            <ul>
                                <li <?php if($include_file == '') { echo "class='active'";}?>><a href="">User Info</a></li>
                                <li <?php if($include_file == '') { echo "class='active'";}?>><a href="">Inventory</a></li>
                                <li <?php if($include_file == '') { echo "class='active'";}?>><a href="">Company</a></li>
                                <li <?php if($include_file == '') { echo "class='active'";}?>><a href="">Newsletter</a></li>
                                <li <?php if($include_file == '') { echo "class='active'";}?>><a href="">My Account</a></li>
                            </ul>
                        </div>
                    <?php };?>
                    <div class="content">
                        <?php include_once($include_file);?>
                    </div>
                </div>

最佳答案

看起来您正在混合ID和类。以下任何HTML或CSS更改均应以您的<a>标签为目标。

<div id="box1">
  <div class="tabs tabs-bottom">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div class="content"><img src="images/homepage12.jpg" alt="" width="117"  height="117" class="left" />
      <div id="tabs-1" class="tabs">
        <p></p>
      </div>
      <div id="tabs-2" class="tabs">
        <p></p>
      </div>
      <div id="tabs-3" class="tabs">
        <p></p>
        <p></p>
      </div>
      <p style="margin-left: 142px; margin-top :10px;"><a href="#" class="link1">Read Full Story</a></p>
    </div>
  </div>
</div>

要么

#box1 #tabs {
    clear: both;
    height: 40px;
    background: url(images/homepage17.jpg) no-repeat right top;
}

#box1 #tabs ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: normal;
}

#box1 #tabs li { float: left; }

#box1 #tabs a {
    display: block;
    float: left;
    width: 132px;
    height: 32px;
    padding: 111px 0px 0px 28px;
    background: url(images/homepage16.jpg) no-repeat left top;
    text-decoration: none;
    font-weight: bold;
    color: red;
}

要么

#box1 .tabs-bottom {
    clear: both;
    height: 40px;
    background: url(images/homepage17.jpg) no-repeat right top;
}

#box1 .tabs-bottom ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: normal;
}

#box1 .tabs-bottom li { float: left; }

#box1 .tabs-bottom a {
    display: block;
    float: left;
    width: 132px;
    height: 32px;
    padding: 111px 0px 0px 28px;
    background: url(images/homepage16.jpg) no-repeat left top;
    text-decoration: none;
    font-weight: bold;
    color: red;
}

http://jsfiddle.net/cf676/2/