How to use js/css to make tab content viewable

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>