javascript - swtiching of tabs to change div content in html5 and jquery -


using ul li want create tab based switching , navigation structure

<body> <header> <ul> <li>apples</li> <li>mangoes</li> </ul> </header> <section> <div class="left">     <ul>         <li>left tab1</li>         <li>left tab2</li>         <li>left tab3</li>     </ul> </div> <div class="right">     <ul>         <li>apples content1 tab1</li>         <li>apples content2 tab1</li>     </ul>     <ul>         <li>mangoes content1 tab1</li>         <li>mangoes content2 tab1</li>     </ul> </div> </section> </body> 

apples , mangoes switching tabs on top , left tabs navigating tabs on left , right tabs show content.

on top default apples in selected state , lefttab1 selected right part must show apples content1 tab1 , apples content2 tab2

if switch apples mangoes left same , right content changes mangoes content1 tab1 , mangoes content2 tab1

same way if navigate lin left tabs content on right changes depending selected tab on header(apples , mangoes).

can please me in writing jquery code achieve task.

look of im trying: http://jsfiddle.net/santooossh/xhpma/25/

suppose mangoes selected in header tab , lefttab1 selected content on right shows highlighted hiding others.


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -