创建选定的 link 标签

Question

我正在尝试创建一个选定的 link 选项卡来加载内容而不重新加载页面。我已经尝试了很多东西，但我找不到一个有效的方法，因为我没有使用实际的 links <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' class，这将相应地设置它的样式。

$('.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' class，包括当前选择的 'linkselected'，因此请更新您的 html 并将其包含在第一个项目中。

创建选定的 link 标签

Create a selected link to tabs

html

css

jquery

selected