Question

简单的选项卡设置，如果相应的内容窗格为空，则尝试隐藏导航控件。我想使用数据属性（数据内容）来匹配元素。

内容窗格可以很好地隐藏，但是导航控件则不能。我想念什么？我觉得我可能有点想不通了...

jQuery;如果“内容”选项卡为空，则根据匹配的数据属性隐藏相应的导航控件。

基本结构：

$('.tabs-content li').each(function(){
      if($.trim($(this).text()) == '' && $(this).children().length == 0){

		// hides content pane		
		$(this).hide(); 

		// should hide matching nav element
        if ($(this).attr('data-content')  == "data-content" ) {
            $('.tabs-navigation li').hide();
         }
		 
      }
    });

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
      <nav>
        <ul class="tabs-nav">
          <li><a href="#" data-content="tab1" class="selected">Tab 1</a></li>
          <li><a href="#" data-content="tab2">Tab 2</a></li>
          <li><a href="#" data-content="tab3">Tab 3</a></li>
        </ul> <!-- tabs-nav -->
      </nav>

      <ul class="tabs-content">
        <li data-content="tab1" class="selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li data-content="tab2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li data-content="tab3"> </li>
      </ul> <!-- tabs-content -->
    </div> <!-- tabs -->

提琴：https://jsfiddle.net/tpveuqsk/2/

Answer 1

您可以这样做更简单：

$('.tabs-content li').each(function(){
    if ($(this).text().trim() == "" ) {
        $(this).hide();
        var data = $(this).attr("data-content")
        $(".tabs-nav a[data-content='"+data+"']").closest("li").hide()
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <nav>
    <ul class="tabs-nav">
      <li><a href="#" data-content="tab1" class="selected">Tab 1</a></li>
      <li><a href="#" data-content="tab2">Tab 2</a></li>
      <li><a href="#" data-content="tab3">Tab 3</a></li>
    </ul> <!-- tabs-nav -->
  </nav>

  <ul class="tabs-content">
    <li data-content="tab1" class="selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li data-content="tab2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li data-content="tab3"> </li>
  </ul> <!-- tabs-content -->
</div> <!-- tabs -->

Answer 2

您可以在查询中使用data-content属性，然后只寻找最接近的li，请参见下面的代码：

$('.tabs-content li').each(function(){
  if($.trim($(this).text()) == '' && $(this).children().length == 0){
  	
    $('[data-content="'+$(this).attr('data-content')+'"]').closest('li').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <nav>
    <ul class="tabs-nav">
      <li><a href="#" data-content="tab1" class="selected">Tab 1</a></li>
      <li><a href="#" data-content="tab2">Tab 2</a></li>
      <li><a href="#" data-content="tab3">Tab 3</a></li>
    </ul> <!-- tabs-nav -->
  </nav>

  <ul class="tabs-content">
    <li data-content="tab1" class="selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li data-content="tab2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li data-content="tab3"> </li>
  </ul> <!-- tabs-content -->
</div> <!-- tabs -->

Answer 3

这应该有效。保存tabs-content项目的data-content值。 tabs-nav中的数据内容适用于“ a”元素而不是“ li”元素。您想同时隐藏一个en li元素，因此请参见以下代码：

$('.tabs-content li').each(function(){
if($.trim($(this).text()) == '' && $(this).children().length == 0){

// hides content pane       
$(this).hide(); 

attrValue= $(this).attr('data-content');

// should hide matching nav element
$('.tabs-nav li').each(function(){
    if ($(this).find('a').attr('data-content')  === attrValue ) {
    $(this).hide();
 }
})

如果数据属性匹配jQuery，则隐藏div

3 个答案: