Question

通常我的jquery选项卡样式可以工作，但是在添加了一个侧边栏之后我没有遇到任何问题，让自己很困惑。我希望活动标签在左侧，顶部和右侧有一条2px黑线，下面没有黑线（即下面的白色）。我还需要它的文字是红色的。不幸的是，我的主动标签css风格似乎并没有控制任何东西。有人可以帮忙吗？小提琴：https://jsfiddle.net/0343rg8u/

https://code.jquery.com/jquery-1.12.4.js
https://code.jquery.com/ui/1.12.1/jquery-ui.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css


<div id="My_RH_BigContainer">
  <div id="RH_tabsContainer">

    <div class="sidebar">
     <div class="sidebar-img" style="display: block;">
        <label>Table 1</label>
      </div>

      <div class="sidebar-img">
        <label>Table 2</label>
      </div>

      <ul id="RH_TabsTable" class="nav-tabs">
        <li class="active"><a href='#Pivot1a_ws' rel="nofollow">Table 1</a></li>
        <li><a href="#Pivot2a_ws" rel="nofollow">Table 2</a></li>
      </ul>

    </div>

    <div id="TabContentID" class="tab-content">
      <div id="Pivot1a_ws" class="tab_pane"></div>
    </div>

  </div>
</div>




#My_RH_BigContainer {
position: absolute;
height: 360px;
border: 1px solid red;
top: 20px;
left: 15px;
width: 500px;
}

#RH_tabsContainer {
Margin-top: 15px;
Margin-bottom: 5px;
Margin-left: 15px;
Margin-right: 15px;
border: 1px solid blue;
height: 330px;
padding: 0px 0px 0px 2px;
}

.sidebar-img {
display: none;
margin-top: 0px;
height: 60px;
background-color: yellow;
border: 0px solid black;
}

.nav-tabs {
border-radius: 0px 0px 0px 0px;
border-style: solid;
border-color: black;
border-width: 0px 0px 2px 0px;
background: transparent;
}

.nav-tabs > li {
float: left;
border-style: solid;
border-color: black;
}

.nav-tabs > li > a {
margin-right: 0px;
border-radius: 1px 1px 1px 1px;
background-image: none;
outline-color: transparent;
border: 0px solid grey;
line-height: 16px;
font-family: "Arial", sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
height: 20px;
width: 115px;
}

.ui-tabs-active{
border-style: solid;
border-color: black;
border-width: 2px 2px 0px 2px;
color: red;
}

.nav-tabs > li > a:hover {
font-weight: bold;
background: white;
color: black;
}





$(function() {

  var index = 'qpsstats-active-tab';
  var dataStore = sessionStorage;
  var oldIndex = 0;
  try {
    // getter: Fetch previous value
    oldIndex = dataStore.getItem(index);
  } catch (e) {}

  $("#RH_tabsContainer").tabs({

    active: oldIndex,

    activate: function(event, ui) {
      //  Get future value
      var newIndex = ui.newTab.parent().children().index(ui.newTab);
      //  Set future value
      try {
        dataStore.setItem(index, newIndex);
      } catch (e) {}

      $('.sidebar-img').hide();
      $('.sidebar-img').eq(ui.newTab.index()).show();
    }
  });

})

Answer 1

我分道扬琴：https://jsfiddle.net/67ms7m4t/3/

说明：

.ui-tabs-active{
border-style: solid;
border-color: black !important;
border-width: 2px 2px 0px 2px;
}

我在border-color之后添加了！important ，否则会被你的CSS覆盖。注意：尝试使用尽可能少的重要内容，否则最终会出现非常混乱的样式覆盖。（每次你这样做，上帝都会驱使用户启动Internet Explorer。）

.ui-tabs-active a {
color: red !important;
border-bottom: 1px solid #fff !important;
margin-bottom: -1px;
}

您的红色需要应用于a元素，而不是.ui-tabs-active元素。此外，为了让活动标签摆脱灰色边框，我们在活动a的底部应用白色边框，并将其margin-bottom移动-1（由@Ram Sergev提供的基本概念）答案如下！）。

#RH_TabsTable{
border-bottom: 1px solid #cfd6d9;
}

最后选项卡底部的黑色边框 - 实际上来自你的#RH_TabsTable元素。不确定我是否理解你在这一个上是正确的，但我想你想要非活动标签的颜色。如果你根本不需要边框（看起来很奇怪），只需给它border-bottom-style: none。

附注：要调试这样的内容，请尝试使用浏览器的开发人员工具。在chrome中，您只需右键单击元素（例如，您的TABLE 1选项卡），从上下文菜单中选择INSPECT，然后查看右下角的样式。在这里，您可以看到各种css规则来自哪个css源，您可以实时交换它们。这使您可以了解页面如何处理其样式并节省大量时间。

Answer 2

您可以将白色背景添加到焦点类和margin-bottom:-1px

将此添加到您的css

.nav-tabs > li > a:focus{
  color:red;
  border-bottom: #fff;
  border-width:1px;
  margin-bottom: -1px;
  background: #fff;
}

您可以在jsfiddle

中看到它

使用侧栏时jquery选项卡样式的问题

2 个答案: