I want to get the value of the data data-itemtype attribute based on
ul > li class = "activeTab"
here is my code.
<ul class="tabs"> <li data-itemtype="1" class="activeTab"><a href="#tab1">Published</a></li> <li data-itemtype="0" class=""><a href="#tab2">Unpublished</a></li> </ul>
if class="activeTab" is in the first <li> element, then in this case it extracts the data attribute of the first element li ie 1 and, therefore, it is applied to the second or any number of li elements.
I tried this
var itemType = $('ul.tabs').find('li.activeTab').attr('data-itemtype');
and it does not work. it shows the value undefined.
Update:
I use tabs. I want to know which tab is currently active, and I need this value in the javascript variable.
here is my HTML code.
<div class="widget"> <ul class="tabs"> <li data-itemtype="1"><a href="#tab1">Published</a></li> <li data-itemtype="0"><a href="#tab2">Unpublished</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <div class="widget" style="margin-top:0px;"> <div class="title"><img src="/images/icons/dark/cart3.png" alt="" class="titleIcon" /><h6>Published Items</h6></div> <p>Content</p> </div> </div> <div id="tab2" class="tab_content"> <div class="widget" style="margin-top:0px;"> <div class="title"><img src="/images/icons/dark/cart3.png" alt="" class="titleIcon" /><h6>Unpublished Items</h6></div> <p>Content</p> </div> </div> </div> <div class="clear"></div> </div>
Used by jQuery.
$.fn.contentTabs = function(){ $(this).find(".tab_content").hide(); //Hide all content $(this).find("ul.tabs li:first").addClass("activeTab").show(); //Activate first tab $(this).find(".tab_content:first").show(); //Show first tab content $("ul.tabs li").click(function() { $(this).parent().parent().find("ul.tabs li").removeClass("activeTab"); //Remove any "active" class $(this).addClass("activeTab"); //Add "active" class to selected tab $(this).parent().parent().find(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).show(); //Fade in the active content return false; }); }; $("div[class^='widget']").contentTabs(); //Run function on any div with class name of "Content Tabs"
the above code does not work for me.
source share