CODEWITHSUNDEEP
jquerytabs
Kamal
Kamal

Reputation: 2180

Simple menu tabs using jQuery

I am trying to create simple tabs menu using jQuery. Which should show and hide a div according to the navigation icon click.

JSfiddle: check my code on fiddle

HTML

<div class="nav">
  <ul>
    <li class="all"><a href="javascript:void(0)">All Contacts</a></li>
    <li class="face selected" ><a href="javascript:void(0)">Facebook</a></li>
    <li class="go"><a href="javascript:void(0)">Google</a></li>
    <li class="ya"><a href="javascript:void(0)">Yahoo</a></li>
    <li class="hot"><a href="javascript:void(0)">Hotmail</a></li>
    <li class="man"><a href="javascript:void(0)">Manually Added</a></li>
  </ul>
</div>

<p>&nbsp;</p>

<div class="frndList"  >

  <ul id="all">
    <li>ALLLL</li>
  </ul>

  <ul id="face">
    <li>FACEEEE</li>
  </ul>

  <ul id="go">
    <li>goooo</li>
  </ul>

  <ul id="ya">
    <li>YAAAA</li>
  </ul>

  <ul id="hot">
    <li>HOTTTT</li>
  </ul>

  <ul id="man">
    <li>MANNNNNN</li>
  </ul>

</div>

SCRIPT

$('.nav li a').click(function(){
    var name = $(this).parent('li').attr('class');
    alert(name)
    $('.friendInfo .nav li a').parent('li').removeClass('selected');
    $(this).parent('li').addClass('selected');
    $('.friendInfo .frndList ul').css('display','none');
    $('.friendInfo .frndList ul#"+name+"').css('display','block');          
})

Upvotes: 0

Views: 756

Answers (3)

Dheeraj
Dheeraj

Reputation: 318

DEMO

Script

$('.frndList ul').first().show(); 
$('.nav li a').click(function(){

        var name = $(this).parent('li').attr('class');
            alert(name)
        $('.nav li a').parent('li').removeClass('selected');
        $(this).parent('li').addClass('selected');
        $('.frndList ul').css('display','none');
        $('.frndList ul#'+name).css('display','block');         
        })

CSS

.frndList ul{display:none;}

HTML

<div class="nav">
            <ul>
                <li class="all"><a href="javascript:void(0)">All Contacts</a></li>
                <li class="face" ><a href="javascript:void(0)">Facebook</a></li>
                <li class="go"><a href="javascript:void(0)">Google</a></li>
                <li class="ya"><a href="javascript:void(0)">Yahoo</a></li>
                <li class="hot"><a href="javascript:void(0)">Hotmail</a></li>
                <li class="man"><a href="javascript:void(0)">Manually Added</a></li>
            </ul>
        </div>

<p>&nbsp;</p>

<div class="frndList"  >

          <ul id="all">
            <li> ALLLL
            </li>          
            </ul>



            <ul id="face">
            <li> FACEEEE
            </li>
             </ul>


            <ul id="go">
            <li>goooo
            </li>
             </ul>



            <ul id="ya">
            <li> YAAAA
            </li>
             </ul>



            <ul id="hot">
            <li> HOTTTT
            </li>
             </ul>



            <ul id="man">
            <li> MANNNNNN
            </li>
             </ul>



          </div>

Upvotes: 0

Jai
Jai

Reputation: 74738

Try this:

  $('.nav li a').click(function (e) {
     e.preventDefault();
     var name = $(this).parent('li').attr('class');
     $('.selected').removeClass('selected'); // removes the selected class
     $(this).addClass('selected'); // adds the selected class to current clicked elem
     $('#'+name).show().siblings('ul').hide(); // shows the target and hides other
  });

Fiddle

Upvotes: 1

RafH
RafH

Reputation: 4544

Try this 

$('a', '.nav').click(function(){
   var name = $(this).parent('li').attr('class').replace(/selected/gi, '');
   $('.selected', '.nav').removeClass('selected');
   $(this).parent().addClass('selected');
   $('ul', '.frndList').hide();
   $('#' + name).show();
})

Fiddle here

Upvotes: 1

Related Questions