如何使用js / css使标签内容可见

Question

I am working on tab

There are 5 tabs

About Us Our Work Our Team News & Events Contact us

and inside each of them there are content and links, images.

What i am trying to achieve here whenever i click the link inside the tab Our Team content ,

It should open the Contact us Tab content .

Here is the code i am using currently, It has some custom js and jquery 2.2.0 used.

Please check the code, i haven't put css here.

The live link of this example is Live Demo

Please help me

 // TABS var tabs = $('.container_tabs'); $('.tabs-content > div', tabs).each(function (i) { if (i != 0) $(this).hide(0); }); tabs.on('click', '.tabs a', function (e) { e.preventDefault(); var tabId = $(this).attr('href'); $('.tabs a', tabs).removeClass(); $(this).addClass('active'); $('.tabs-content > div', tabs).hide(0); $(tabId).show(); }); // var tabs1 = $('.container_tabs1'); // $('.tabs-content > div', tabs1).each(function (i) { // if (i != 0) $(this).hide(0); // }); // tabs1.on('click', '.tabs a', function (e) { // // e.preventDefault(); // // var tabId = $(this).attr('href'); // // // $('.tabs a', tabs1).removeClass(); // $(this).addClass('active'); // // $('.tabs-content > div', tabs1).hide(0); // $(tabId).show(); // // }); (function ($) { jQuery.fn.lightTabs = function (options) { var createTabs = function () { tabs = this; i = 0; showPage = function (tabs, i) { $(tabs).children("div").children("div").hide(); $(tabs).children("div").children("div").eq(i).show(); $(tabs).children("ul").children("li").removeClass("active"); $(tabs).children("ul").children("li").eq(i).addClass("active"); }; showPage(tabs, 0); $(tabs).children("ul").children("li").each(function (index, element) { $(element).attr("data-page", i); i++; }); $(tabs).children("ul").children("li").click(function () { showPage($(this).parent().parent(), parseInt($(this).attr("data-page"))); }); }; return this.each(createTabs); }; })(jQuery); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tabs cw-wrapper"> <ul class="cw-30"> <li class="" data-page="0">About Us</li> <li data-page="1">Our Work</li> <li data-page="2">Our Team</li> <li data-page="3">Our Partners</li> <li data-page="4" class="active">Work With Us</li> <li data-page="5">Contact us</li> </ul> <div class="cw-70"> <div class="content" style="display: none;"> Content 1 </div> <div class="content" style="display: none;"> Content 2 </div> <div class="content" style="display: none;"> Content 3 </div> <div class="content" style="display: none;"> Content 4 </div> <div class="content" style="display: none;"> <h3>Contact us Content</h3> </div> </div> </div> 

Answer 1

If I understand you correctly, you want to be able to switch tabs by links that are inside your tab contents too. In that case you should create a function for switching tabs, instead of a click event in you menu. here is an example:

edit #1: I removed all onclicks and bind switchTab function to all elements that have switch-tab class.

edit #2: As requested, you can pass initial tab number from url ?tab=x codepen

 // set tab from url // sample url: http://mywebsite.com/my-route?tab=2 $(document).ready(function() { var url = new URL(window.location.href); var tabNumber = url.searchParams.get('tab'); if (tabNumber) switchTab(tabNumber); }); // change tab by clicking an element with "switch-tab" class $('.switch-tab').on('click', function(e) { var tabNumber = e.target.getAttribute('data-tab'); switchTab(tabNumber); }); // change tab by passing tab number function switchTab(tabNumber) { $('#tabs li').removeClass('active'); $('#tabs li[data-tab=' + tabNumber + ']').addClass('active'); $('.content').css('display', 'none'); $('.content[data-content=' + tabNumber + ']').css('display', 'block'); } 

 <style> #tabs li.active { font-weight: bold; } .content { display: none; } .content.visible { display: block; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tabs cw-wrapper"> <ul class="cw-30" id="tabs"> <li data-tab="0" class="switch-tab">About Us</li> <li data-tab="1" class="switch-tab">Our Work</li> <li data-tab="2" class="switch-tab">Our Team</li> <li data-tab="3" class="switch-tab">Our Partners</li> <li data-tab="4" class="switch-tab active">Work With Us</li> <li data-tab="5" class="switch-tab">Contact us</li> </ul> <div class="cw-70"> <div class="content" data-content="1"> <p>Content 1</p> </div> <div class="content" data-content="2"> <p>Content 2</p> </div> <div class="content" data-content="3"> <p>Content 3</p> </div> <div class="content visible" data-content="4"> <p>Content 4</p> <a href="#" data-tab="5" class="switch-tab">go to contact us</a> </div> <div class="content" data-content="5"> <h3>Contact us Content</h3> </div> </div> </div>