Sidebar yardım

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id='cssmenu'>
<ul class="nav nav-tabs">
   <li class="active"><a href='#test1'><span>Home</span></a></li>
   <li class="has-sub"><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#test2'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#test2'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

<div class="tab-content">
    <div id="test1" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Anasayfa</p>
    </div>
    <div id="test2" class="tab-pane fade">
      <h3>SubPage 1</h3>
      <p>Alt Sayfa 1</p>
    </div>
</div>

<script>
$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
});
</script>