There a plenty of different ways to solve this problem but in the spirit of keeping your HTML...im going to create an extremely lightweight solution.
The key items is that your
items have a class of tab-lbl and a data attribute of data-tab. data-tab contains the ID of the div that the tag is targeting.
The tabs themselves get put inside a wrapper elements containing the ID from the respective tab label located in data-tab.
You can expand upon this by setting which tab is active based on a class name on the tab label.
A simple search of jQuery tabs will give you thousands of results, here is a small sample
JavaScript · Bootstrap[^]
Tabs | jQuery UI[^]
10 Most Beneficial jQuery Tab Plugins[^]
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("#tab-container").on("click", ".tab-lbl", function(){
var that = $(this);
var tabid = that.data("tab");
$(".tab").each(function(k, v){
$(this).hide();
});
$(tabid).show();
});
});
</script>
</head>
<body>
<div id="header">
<div class="logo"><a href="#"><span>TAJWEED</span></a></div>
</div>
<div id="container">
<div class="sidebar">
<div id="nav">
<ul id="tab-container">
<li><a href="#" class="selected tab-lbl" data-tab="#tab-dashboard">Dashboard</a></li>
<li><a href="#" class="tab-lbl" data-tab="#tab-menu">Menue</a></li>
<li><a href="#" class="tab-lbl" data-tab="#tab-slider">Slider</a></li>
<li><a href="#" class="tab-lbl" data-tab="#tab-gallery">Gallery</a></li>
<li><a href="#" class="tab-lbl" data-tab="#tab-pictures">Pictures</a></li>
</ul>
</div>
</div>
<div class="content">
<div id="tab-dashboard" class="tab"><h1>Dashboard</h1></div>
<div id="tab-menu" class="tab" style="display: none;"><h1>Menu</h1></div>
<div id="tab-slider" class="tab" style="display: none;"><h1>Slider</h1></div>
<div id="tab-gallery" class="tab" style="display: none;"><h1>Gallery</h1></div>
<div id="tab-pictures" class="tab" style="display: none;"><h1>Pictures</h1></div>
</div>
</body>
</html>
</div>