Bootstrap nav go to section

Question

I want to have a nav element with multiple visible sections and an invisible one, then on the first section have a link (a href) that would programmatically set the invisible nav-section to visible and display it's contents. I try to do it like

 function MyClick(event){
            $(".nav").find(".active").removeClass("active");
            x = document.getElementById("artu");
            x.style.display="block";
            x.className += ' active';
            window.location.href = "#articolex";
            window.location.hash = '#articolex';
       }

or better check the full code in this jsfiddle but it does not work...

In my actual code (not jsfiddle) the javascript function worked, and it did set the desired tab visible and active but still without changing the "page content" to the section I wanted. I have no idea why the jsfiddle does not do what my actual code does... But anyway, my problem remais: I need the link to act as an actual click on a nav item.

Please advise.

Answer 1

Having an A tag with href and onclick doesn't really work. Since you're already using jQuery, you can more easily use a jQuery click event by giving the link element an id, and using:

$("#goto").click(function() {
    $(".nav").find('.active').removeClass('active');
    $("#artu").css("display", "block");
    $("#artu").addClass("active");
    $("#home").removeClass("in active");
    $("#articolex").addClass("in active");
    //etc
});

Full snippet below

$("#goto").click(function() {
  $(".nav").find('.active').removeClass('active');
  $("#artu").css("display", "block");
  $("#artu").addClass("active");
  $("#home").removeClass("in active");
  $("#articolex").addClass("in active");
  //etc
});

body {
  margin: 5px;
  background: #A6A6A6
}
/* Tab Navigation */

.nav-tabs {
  margin: 0;
  padding: 0;
  border: 0;
}
.nav-tabs > li > a {
  background: #DADADA;
  border-radius: 0;
  box-shadow: inset 0 -8px 7px -9px rgba(0, 0, 0, .4), -2px -2px 5px -2px rgba(0, 0, 0, .4);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  background: #F5F5F5;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, .4), -2px -3px 5px -2px rgba(0, 0, 0, .4);
}
/* Tab Content */

.tab-pane {
  background: #F5F5F5;
  box-shadow: 0 0 4px rgba(0, 0, 0, .4);
  border-radius: 0;
  text-align: center;
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <header>
    <!-- header pagecontrol -->
    <div class="container">
      <h2>Stuff</h2>
      <ul class="nav nav-tabs">
        <li class="active">
          <a data-toggle="tab" href="#home">Home</a>
        </li>
        <li>
          <a data-toggle="tab" href="#menu1">Menu1</a>
        </li>
        <li>
          <a data-toggle="tab" href="#menu2">Menu2</a>
        </li>
        <li id="artu" style="display:none">
          <a data-toggle="tab" href="#articolex">Menu4</a>
        </li>
      </ul>
      <!-- content pages -->
      <div class="tab-content">
        <!-- home page -->
        <div id="home" class="tab-pane fade in active">
          <h3>Home</h3>
          <p>
            Some content
          </p>
          <a id="goto" title="Go to Menu4" href="#">Go to Menu4</a>
        </div>

        <!-- articol -->
        <div id="menu1" class="tab-pane fade">
          <h3>Menu1</h3>
          <p>
            Other content
          </p>
        </div>
        <!-- articol -->
        <div id="articolex" class="tab-pane fade">
          <h3>Menu4</h3>
          <p>
            Special content
          </p>
        </div>
        <!-- articol -->
        <div id="menu2" class="tab-pane fade">
          <h3>Menu2</h3>
          <p>
            Another content
          </p>
        </div>


      </div>
    </div>
  </header>
</div>