How to build simple tabs with jQuery?

I am guessing your website is having problems with href, i presume that when user clicks a href, website automatically eradicating itself.

Here is new solution's jsFiddle.

I have a new solution for you:

updated jQuery:

$('#tabs li a').click(function(){
  var t = $(this).attr('id');

  if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#'+ t + 'C').fadeIn('slow');
 }
});

---

new html markup:

<ul id="tabs">

      <li><a id="tab1">test1</a></li>
      <li><a id="tab2">test2</a></li>
      <li><a id="tab3">test3</a></li>
      <li><a id="tab4">test4</a></li>

</ul>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>

Solution JSFiddle:: https://jsfiddle.net/incorelabs/mg6e4ren/74/

Implementing Tabs is really simple, I have modified the HTML for your question a bit. Removed the anchor tags coz they are not needed.

HTML

<ul>
    <li class="tab-switcher" data-tab-index="0" tabindex="0">
        Tab 1
    </li>
    <li class="tab-switcher" data-tab-index="1" tabindex="0">
        Tab 2
    </li>
    <li class="tab-switcher" data-tab-index="2" tabindex="0">
        Tab 3
    </li>
    <li class="tab-switcher" data-tab-index="3" tabindex="0">
        Tab 4
    </li>
</ul>
<div id="allTabsContainer">
    <div class="tab-container" data-tab-index="0">
        Some content for Tab - 1
    </div>
    <div class="tab-container" data-tab-index="1" style="display:none;">
        Some content for Tab - 2
    </div>
    <div class="tab-container" data-tab-index="2" style="display:none;">
        Some content for Tab - 3
    </div>
    <div class="tab-container" data-tab-index="3" style="display:none;">
        Some content for Tab - 4
    </div>
</div>

HTML De-Mystified

1. Add the "tab-switcher" class to each "li" element as well as tabindex="0" to make it accessible.
2. Give a "data-tab-index" attribute to each "li".
3. Add the "tab-container" class to each Tabbed Container. Also provide a "data-tab-index" attribute to each container which corresponds to the "data-tab-index" attribute on the "li" element.
4. Show only the container you want visible, hide the others using "display:none".
5. Provide a parent container for all the content of the tabbed containers. In this example this is the "allTabsContainer" div.

jQuery

$(document).ready(function () {
    var previousActiveTabIndex = 0;

    $(".tab-switcher").on('click keypress', function (event) {
        // event.which === 13 means the "Enter" key is pressed

        if ((event.type === "keypress" && event.which === 13) || event.type === "click") {

            var tabClicked = $(this).data("tab-index");

            if(tabClicked != previousActiveTabIndex) {
                $("#allTabsContainer .tab-container").each(function () {
                    if($(this).data("tab-index") == tabClicked) {
                        $(".tab-container").hide();
                        $(this).show();
                        previousActiveTabIndex = $(this).data("tab-index");
                        return;
                    }
                });
            }
        }
    });
});

jQuery De-Mystified

1. The click and keypress listener on the "tab-switcher" gets initialized on "document.ready". (Note: The keypress only registers the "Enter" key)
2. The variable "previousActiveTabIndex" keeps a track of the previous active tab so that if we press on the same tab again and again, it can be ignored.
3. We run an EACH loop on the "tab-container". This is done to know which tab should be displayed. If the "data-tab-index" data attribute on each matches, we display that tab.
4. We keep the value of the "data-tab-index" saved in "previousActiveTabIndex" which helps us keep a track of the previous tab which was clicked.

If there are doubts or if someone has suggestions, do comment on the post.