单击选项卡时，border-top颜色与活动选项卡背景颜色的颜色相同

Question

我希望current tab-content的边框位于active tab background color。我写了下面的css，但它没有申请。

.tab-content.current{
            display: inherit;
            border-top: 5px solid #3399CC;
        }

如果我将!important放到border-top，那么border-top的悬停效果就不适用了。对于这种悬停效果，我为它编写了脚本。请帮助有没有其他方法来做到这一点。谢谢。希望你有我的问题。如果不让我知道。

＆＃13;

＆＃13;

$(document).ready(function() {

  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })

  $(document).ready(function() {
    $('.tab1').hover(function() {
      $('.tab-content').css({
        "border-top": "5px solid #FF0000"
      });
    });
    $('.tab2').hover(function() {
      $('.tab-content').css({
        "border-top": "5px solid #88DD00"
      });
    });
    $('.tab3').hover(function() {
      $('.tab-content').css({
        "border-top": "5px solid #673ab7"
      });
    });
    $('.tab4').hover(function() {
      $('.tab-content').css({
        "border-top": "5px solid #336699"
      });
    });
  });

})

＆＃13;

body {
  margin-top: 100px;
  font-family: 'Trebuchet MS', serif;
  line-height: 1.6
}
.container {
  width: 800px;
  margin: 0 auto;
}
ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.tabs li {
  background: #EFEFEF;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-radius: 5px 5px 0px 0px;
}
.tab1:hover {
  background: #FF0000;
  color: #fff;
  border: none;
}
.tab2:hover {
  background: #88DD00;
  color: #fff;
  border: none;
}
.tab3:hover {
  background: #673ab7;
  color: #fff;
  border: none;
}
.tab4:hover {
  background: #336699;
  color: #fff;
  border: none;
}
ul.tabs li.current {
  background: #3399CC;
  color: #fff;
  border: none;
}
.tab-content {
  display: none;
  background: #ededed;
  padding: 15px;
}
.tab-content.current {
  display: inherit;
  border-top: 5px solid #3399CC;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <ul class="tabs">
    <li class="tab-link current tab1" data-tab="tab-1">Tab One</li>
    <li class="tab-link tab2" data-tab="tab-2">Tab Two</li>
    <li class="tab-link tab3" data-tab="tab-3">Tab Three</li>
    <li class="tab-link tab4" data-tab="tab-4">Tab Four</li>
  </ul>

  <div id="tab-1" class="tab-content current">
    Lorem ipsufgdgt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div id="tab-2" class="tab-content">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullggdt mollit anim id est laborum.
  </div>
  <div id="tab-3" class="tab-content">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irurgdgdglit esse cillum dolore eu fugiat nulla pariatur.
  </div>
  <div id="tab-4" class="tab-content">
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamdfdrgdgercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

</div>
<!-- container -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个：

val schema = StructType(
  myTableColumns.map(
    c => StructField(
//Field descriptions ~200 fields
)))

val rowRDD = rddProcessedLines.map(line => {
  Row.fromSeq(line)
})

val fileSchemaRDD = hiveContext.createDataFrame(rowRDD, schema)

fileSchemaRDD.registerTempTable("output_table_name")
fileSchemaRDD.write.orc("output_folder")

$(document).ready(function() {

  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })

  $(document).ready(function() {
    $('.tab1').hover(function() {
 if($(this).hasClass('current')){
$('.tab-content').css({
        "border-top": "5px solid #3399cc"
      });
}else{
$('.tab-content').css({
        "border-top": "5px solid #FF0000"
      });}
     
    });
    $('.tab2').hover(function() {          
      if($(this).hasClass('current')){
        $('.tab-content').css({
        "border-top": "5px solid #3399cc"
      });
     }else{
      $('.tab-content').css({
        "border-top": "5px solid #88DD00"
      });
      }
    });
    $('.tab3').hover(function() {
      if($(this).hasClass('current')){
        $('.tab-content').css({
        "border-top": "5px solid #3399cc"
      });
     }else{
      $('.tab-content').css({
        "border-top": "5px solid #673ab7"
      });
      }          
    });
    $('.tab4').hover(function() {
      if($(this).hasClass('current')){
        $('.tab-content').css({
        "border-top": "5px solid #3399cc"
      });
     }else{
      $('.tab-content').css({
        "border-top": "5px solid #336699"
      });
      }
     
    });
  });

})

body {
  margin-top: 100px;
  font-family: 'Trebuchet MS', serif;
  line-height: 1.6
}
.container {
  width: 800px;
  margin: 0 auto;
}
ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.tabs li {
  background: #EFEFEF;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-radius: 5px 5px 0px 0px;
}
.tab1:hover {
  background: #FF0000;
  color: #fff;
  border: none;
}
.tab2:hover {
  background: #88DD00;
  color: #fff;
  border: none;
}
.tab3:hover {
  background: #673ab7;
  color: #fff;
  border: none;
}
.tab4:hover {
  background: #336699;
  color: #fff;
  border: none;
}
ul.tabs li.current {
  background: #3399CC;
  color: #fff;
  border: none;
}
.tab-content {
  display: none;
  background: #ededed;
  padding: 15px;
}
.tab-content.current {
  display: inherit;
  border-top: 5px solid #3399CC;
}

Answer 2

你需要这样吗？

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <ul class="tabs">
    <li class="tab-link current tab1" data-tab="tab-1">Tab One</li>
    <li class="tab-link tab2" data-tab="tab-2">Tab Two</li>
    <li class="tab-link tab3" data-tab="tab-3">Tab Three</li>
    <li class="tab-link tab4" data-tab="tab-4">Tab Four</li>
  </ul>

  <div id="tab-1" class="tab-content current">
    Lorem ipsufgdgt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div id="tab-2" class="tab-content">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullggdt mollit anim id est laborum.
  </div>
  <div id="tab-3" class="tab-content">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irurgdgdglit esse cillum dolore eu fugiat nulla pariatur.
  </div>
  <div id="tab-4" class="tab-content">
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamdfdrgdgercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

</div>
<script>
$(document).ready(function() {

  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })

  $(document).ready(function() {
	
    $('.tab1,.tab2,.tab3,.tab4').mouseover(function() {
		bcolor=$('.tab-content').css("border-top");
	});
	
    $('.tab1').hover(function() {
      $('.tab-content').css({
        "border-top": "5px solid #FF0000"
      });
    });
    $('.tab2').hover(function() {
      $('.tab-content').css({
        "border-top": "5px solid #88DD00"
      });
    });
    $('.tab3').hover(function() {
      $('.tab-content').css({
        "border-top": "5px solid #673ab7"
      });
    });
    $('.tab4').hover(function() {
      $('.tab-content').css({
        "border-top": "5px solid #336699"
      });
    });
	
	
    $('.tab1,.tab2,.tab3,.tab4').mouseout(function() {
		$('.tab-content').css("border-top",bcolor);
	});
	
  });

})
</script>
<style>
body {
  margin-top: 100px;
  font-family: 'Trebuchet MS', serif;
  line-height: 1.6
}
.container {
  width: 800px;
  margin: 0 auto;
}
ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.tabs li {
  background: #EFEFEF;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-radius: 5px 5px 0px 0px;
}
.tab1:hover {
  background: #FF0000;
  color: #fff;
  border: none;
}
.tab2:hover {
  background: #88DD00;
  color: #fff;
  border: none;
}
.tab3:hover {
  background: #673ab7;
  color: #fff;
  border: none;
}
.tab4:hover {
  background: #336699;
  color: #fff;
  border: none;
}
ul.tabs li.current {
  background: #3399CC;
  color: #fff;
  border: none;
}
.tab-content {
  display: none;
  background: #ededed;
  padding: 15px;
}
.tab-content.current {
  display: inherit;
  border-top: 5px solid #3399CC;
}
</style>

＆＃13;

＆＃13;

＆＃13;