Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
5.00/5 (2 votes)
I have created the page in html as the admin panel. I want to change the page as when the user click on the different tabs given like as in fig. Dashboard, menue, slider.
i just want when the user click on it, the right lower window change automatically, i think it will done in the jquery, but have no idea how. please help me..
HTML
<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>
       	<li><a href="#" class="selected">Dashboard</a></li>
       	<li><a href="#">Menue</a></li>
       	<li><a href="#">Slider</a></li>
       	<li><a href="#">Gallery</a></li>
       	<li><a href="#">Pictures</a></li>

       </ul>
   	
       </div>
	
   </div>
   <div class="content">
   <h1>Dashboard</h1>
   <p>Here you can do the stuff</p>
   	
   </div>
	
</div>


What I have tried:

i want to try the javascript or the jquery inorder to work with the project.
Posted
Updated 10-Aug-16 6:01am
v2

1 solution

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 &middot; Bootstrap[^]

    Tabs | jQuery UI[^]

    10 Most Beneficial jQuery Tab Plugins[^]


    HTML
    <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>
  •  
    Share this answer
     

    This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



    CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900