Jquery - Load tab from different link

I am using the following jquery code for a simple tab view where if you click a tab it will display a div specific to that tab. This only works when clicking tabs inside the ul.tabs property. How could I adjust the code to also allow for a link on the same page outside the ul.tabs list to show any div I want? $(document).ready(function(){ $('ul.tabs').each(function(){ // For each set of tabs, we want to keep track of // which tab is active and it's associated content var $active, $content, $links = $(this).find('a'); // Use the first link as the initial active tab $active = $links.first().addClass('active'); $content = $($active.attr('href')); // Hide the remaining content $links.not(':first').each(function () { $($(this).attr('href')).hide(); }); // Bind the click event handler $(this).on('click', 'a', function(e){ // Make the old tab inactive. $active.removeClass('active'); $content.hide(); // Update the variables with the new link and content $active = $(this); $content = $($(this).attr('href')); // Make the tab active. $active.addClass('active'); $content.show(); // Prevent the anchor's default click action e.preventDefault(); }); }); }); Here is the html:

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

So I would like to use href="#photo_tab" on a link somewhere else on the page that will bring up the photo_tab div and show the active tab.

以上就是Jquery - Load tab from different link的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准