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

Question

通常我的 jquery 选项卡样式可以工作，但是在添加侧边栏之后我遇到了无穷无尽的问题并且让自己非常困惑。我希望事件选项卡在左侧、顶部和右侧有一条 2px 的黑线，并且下方没有黑线(即下方为白色)。我还需要它的文字是红色的。不幸的是，我的事件选项卡 css 样式似乎无法控制任何东西。谁能帮忙？ fiddle :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

我 fork 了你的 fiddle :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 覆盖。注意:尽量少用 !importants ，否则你最终会得到非常困惑的样式覆盖。 (每次这样做，上帝都会促使用户启动 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 规则，您可以实时交换它们。这让您了解您的页面如何处理其样式并节省您大量的时间。