Question

我正在尝试创建一个选定的链接，指向加载内容但不重新加载页面的标签。我已经尝试了很多东西，但由于我没有使用实际的链接<a>，我找不到一个有用的东西我只是希望它们在选中时改变状态。这是我的代码：

HTML

<nav class="secondMenu">
<label for="toggleMenu" class="menuTitle" onclick="">Categories</label>
<input type="checkbox" id="toggleMenu" />
<ul class="nav">
<li><div id="common" class="linkselected" >Common</div></li>
<li><div id="deposits" class="tab_button">Deposits</div></li>
<li><div id="withdrawals" class="tab_button">Withdrawals</div></li>
<li><div id="verification" class="tab_button">Verification</div></li>
<li><div id="account" class="tab_button">Account</div></li>
<li><div id="betting" class="tab_button">Betting</div></li>
<li><div id="bonus" class="tab_button">Bonus</div></li>
</ul>
</nav>

JS

$(document).ready( function () {
  var table = $('#example').DataTable({
    bInfo: false,
    bFilter: false,
    bSort:false,
    bPaginate:false
  }); 

  $('.tab_button').on('click',function(){
      $('tbody tr').hide();
      $('tbody tr[type="'+this.id+'"].title').show();
    if(this.id == "comunes"){
        $('tbody tr').not('.title').show();
    }else{
      $('tbody tr[type="'+this.id+'"]:not(".title")').show();
    }
  });

    $('.secondMenu ul li').click(function(){
        console.log('hiding');
        $('.menuTitle').click();
        var title=$(this).find('.tab_button').html();
        console.log(title);
        $('.menuTitle').html(title);


    });


} );// JavaScript Document

希望我自己解释一下，谢谢。

Answer 1

所以我假设所选列表项应该有'linkselected'类，这将相应地设置它。

$('.secondMenu ul li:not(.linkselected)').click(function(){
  $('.secondMenu ul li').removeClass('linkselected'); // remove the linkselected class whereever it may be
  $(this).addClass('linkselected'); // add it to the item that was just clicked on
});

您还应该对所有项目使用'tab_button'课程，包括当前选定的'linkselected'，因此请更新您的html并将其包含在第一项中。

创建选项卡的选定链接

1 个答案: