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.