CODEWITHSUNDEEP
jquerycss
json
json

Reputation: 1

jQuery simple tabs

I've created simple tabs with jQuery - hiding and showing the appropriate div onClick. See example here http://jsfiddle.net/DCNpK/1/ Everything works fine - my question is regarding the functionality below:

var activeTab = $(this).find("a").attr("href");
$(activeTab).show();

Can anyone explain why does - $(activeTab).show(); - display the correct div even though - var activeTab - refers to the value of the href, and not the id of the div?

Upvotes: 0

Views: 452

Answers (2)

Lakshmi C Raveendran
Lakshmi C Raveendran

Reputation: 300

Check the link given below, this shows a simple tab by comparing the id and data_target attribute:

$('ul.tabs li').click(function() {
var tab_id = $('.tab-content').attr('id');
var datatarget = $(this).attr('data-target');
if ($("#" + datatarget == tab_id)) {
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + datatarget).addClass('current');
   } else {
    alert("no-match");
  }
})

https://jsfiddle.net/zmr7835e/

Upvotes: 3

Raynos
Raynos

Reputation: 169401

Because inside the href there is the string "#div1" which is jQuery selector so $("#div1") gives you the correct div

Upvotes: 4

Related Questions