在 HTML 中隐藏所选选项卡的底部边框

Question

我有一个水平 HTML 选项卡，我希望隐藏所选选项卡的底部边框。

这是我的当前代码 - https://jsfiddle.net/vgx2k7p5/

问题已被问到here and here

但这两种解决方案都不起作用，因为我使用的是 div 结构并且没有太多 javascript。

jQuery('.tab-links a').on('click', function(e) {

  var currentAttrValue = jQuery(this).attr('href');

  jQuery(currentAttrValue).show().siblings().hide(); //changed here
  jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
  e.preventDefault();
});

.tabs {
  width: 90%;
  margin: auto;
}
/*----- Tab Links -----*/

/* Clearfix */

.tab-links:after {
  display: block;
  clear: both;
  content: '';
}
.tab-links {
  margin: 0px;
}
.tab-links li {
  margin: 0px 3px;
  float: left;
  list-style: none;
}
.tab-links a {
  padding: 9px 15px;
  display: inline-block;
  border-radius: 3px 3px 0px 0px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  color: #999;
  transition: all linear 0.2s;
  border: 1px solid #fff;
}
.tab-links a:hover {
  text-decoration: none;
  /*background: #f1f1f1;*/
  /*border-bottom: 4px solid #999;  */
}
li.active a,
li.active a:hover {
  /* border-bottom: 4px solid #444;  */
  /*background: #ccc;*/
  border: 1px solid #ccc;
  border-bottom: 1px solid #fff;
  color: #444;
}
/*----- Content of Tabs -----*/

.tab-content {
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #ccc;
  background: #fff;
  min-height: 300px;
  z-index: -99;
}
.tab {
  display: none;
  min-height: 300px;
}
.tab.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs margintop20">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">PROFILE</a>
    </li>
    <li><a href="#tab2">REVIEWS</a>
    </li>
    <li><a href="#tab3">REWARDS</a>
    </li>

  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab active clearfix">


    </div>

    <div id="tab2" class="tab">

    </div>

    <div id="tab3" class="tab">
      <h3>Videos and Screenshots</h3>

    </div>


  </div>
</div>

</div>

我在这里做错了什么？设置 Z-index 和增加 border-bottom 宽度都不起作用。

Answer 1

我已经更新了你的 css :

/* ADDED */
.tab-links .active{
    margin-top : 1px;
}
.active > a {
    margin-bottom: -1px;
}

现在似乎可以正常工作了！

jQuery('.tab-links a').on('click', function(e) {

  var currentAttrValue = jQuery(this).attr('href');

  jQuery(currentAttrValue).show().siblings().hide(); //changed here
  jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
  e.preventDefault();
});

.tabs {
  width: 90%;
  margin: auto;
}
/*----- Tab Links -----*/

/* Clearfix */

.tab-links:after {
  display: block;
  clear: both;
  content: '';
}
.tab-links {
  margin: 0px;
}
.tab-links li {
  margin: 0px 3px;
  float: left;
  list-style: none;
}
.tab-links a {
  padding: 9px 15px;
  display: inline-block;
  border-radius: 3px 3px 0px 0px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  color: #999;
  transition: all linear 0.2s;
  border: 1px solid #fff;
}
.tab-links a:hover {
  text-decoration: none;
  /*background: #f1f1f1;*/
  /*border-bottom: 4px solid #999;  */
}
li.active a,
li.active a:hover {
  /* border-bottom: 4px solid #444;  */
  /*background: #ccc;*/
  border: 1px solid #ccc;
  border-bottom: 1px solid #fff;
  color: #444;
}



/*----- Content of Tabs -----*/

.tab-content {
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #ccc;
  background: #fff;
  min-height: 300px;
  z-index: -99;
}
.tab {
  display: none;
  min-height: 300px;
}
.tab.active {
  display: block;
}


/* ADDED */
.tab-links .active{
  margin-top : 1px;
  }
.active > a {
    margin-bottom: -1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs margintop20">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">PROFILE</a>
    </li>
    <li><a href="#tab2">REVIEWS</a>
    </li>
    <li><a href="#tab3">REWARDS</a>
    </li>

  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab active clearfix">


    </div>

    <div id="tab2" class="tab">

    </div>

    <div id="tab3" class="tab">
      <h3>Videos and Screenshots</h3>

    </div>


  </div>
</div>

</div>

在 HTML 中隐藏所选选项卡的底部边框

Hide the bottom border of a selected Tab in HTML

html

javascript

css

tabs