CODEWITHSUNDEEP
jqueryhtmlcssselected
Anel Barco
Anel Barco

Reputation: 21

Create a selected link to tabs

I'm trying to create a selected link to tabs that load content without reloading the page. I've tried so many things but I can't find one that works since I'm not using actual links <a> I just want them to change the state when selected. Here's my code:

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

hope I explained myself, thanks.

Upvotes: 0

Views: 67

Answers (1)

partypete25
partypete25

Reputation: 4413

So i'm making the assumption that the selected list item should have the 'linkselected' class, which will style it accordingly.

$('.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
});

You should also use the 'tab_button' class on all items, including the currently selected 'linkselected', so update your html and include it on the first item.

Upvotes: 1

Related Questions