Css,js Write Easy tab navigation
Last Update:2016-05-29
Source: Internet
Author: User
<span id="Label3"></p>Easy Tab Navigation<p><p>As the front-end novice, looking at others to write the tab navigation code, they want to imitate but always forget. So this time I use Css,js to write a simple tab navigation, not much to say, on the code, the first is the HTML and CSS parts</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><!</span></span><span style="color: #ff00ff;"><span style="color: #ff00ff;">DOCTYPE HTML</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">HTML</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Lang</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "en"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Head</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Meta</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">CharSet</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "UTF-8"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">title</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>TAB TAB Toggle<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">title</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">style</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "text/css"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">* </span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">padding</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">0</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">margin</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">0</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">. Tabs</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">margin</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">15% 15%</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">width</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">300px</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Height</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">300px</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Border</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">2px solid #eee</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">. Tab-head</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">List-style</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">None</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">width</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">100%</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Height</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">30px</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Border-bottom</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">2px solid #eee</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">. Tab-contain. content</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">text-align</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">Center</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">width</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">300px</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Height</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">268px</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">Li</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">float</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;"></span> left</span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">text-align</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">Center</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Line-height</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">30px</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">width</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">99px</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Height</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">30px</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">background</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">#aaa</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">cursor</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">Pointer</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">Li:nth-child (1)</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Margin-left</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">0px</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Border-right</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">1.5px Solid #fff</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">background</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">#fff</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="background-color: #f5f5f5; color: #800000;"><span style="background-color: #f5f5f5; color: #800000;">Li:nth-child (3)</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">{</span></span><span style="background-color: #f5f5f5; color: #ff0000;"><span style="background-color: #f5f5f5; color: #ff0000;">Border-left</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">:</span></span><span style="background-color: #f5f5f5; color: #0000ff;"><span style="background-color: #f5f5f5; color: #0000ff;">1.5px Solid #fff</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">;</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">}</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Head</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "tabs"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">ul</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "tab-head"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Li</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Football<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Li</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Li</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Basketball<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Li</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Li</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Table tennis<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Li</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">ul</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "tab-contain"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "football content"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Cristiano ronaldo, Lionel messi, adjara, Zidane<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "basketball content"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Hidden</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>james, kobe, jordan, wade, paul, delong.<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "pingpang content"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Hidden</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Cai zhenhua, Kong linghui, Liu guoliang, Guo Yue<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><p><p>With regard to tab navigation, the most important thing for a person to think about is the code Structure. The entire tab is composed of the title bar and the main content, so within a div of class "tabs", a div consisting of the title list UL and the entire subject content class "tab-contain".</p></p><p><p>(1) Note that the LI element is to be set to the left floating float:left; add a background color to all Li elements, but the first LI element sets a different background color to Differentiate.</p></p><p><p>(2) the main content except the first Div display, the others are Hidden.</p></p><p><p>(3) about the Nth-child (n) selector refers to the parent element under the sub-elements, the specific meaning can be Baidu or Google.</p></p><p><p></p></p><p><p>OK, after reading the HTML and CSS section, see JS section below, here I quote jquery</p></p><pre><pre> <span style="font-size:15px;"> (<span style="color: #0000ff;">function </span> <span style="color: #000000;"> () {</span> <span style="color: #0000ff;">var </span> $lists = $ ('. tab-head li ' <span style="color: #000000;">); $ Lists.each (</span> <span style="color: #0000ff;">function </span> <span style="color: #000000;" "> () {$ (</span> <span style="color: #0000ff;">this </span>). on (' mouseover ', <span style="color: #0000ff;">function </span> <span style="color: #000000;"> () {$ ( /span><span style="color: #0000ff;">this </span>). css (' background ', ' #fff '). siblings (). css (' background ', ' #aaa ' Span style= "color: #000000;" >); </span> <span style="color: #0000ff;">var </span> index = $ (<span style="color: #0000ff;">this </span> <span style=" Color: #000000; ">). Index (); $ (</span> '. content '). eq (index). attr (' hidden ', <span style="color: #0000ff; >false </span>). siblings (). attr (' Hidden ', <span style= " color: #0000ff;">true </span> <span style="color: #000000;">); })})})()</span></span></pre></pre><p><p>The above code is to say the following points:</p></p><p><p>(1) (function () {}) () is the way the anonymous function is self-executing;</p></p><p><p>(2) the $.each method iterates through all the array items in the $lists, and each Li element is bound to the "mouseover" Event.</p></p><p><p>(3) $ (selector). Index () If no argument is returned, the object is indexed in the sibling element</p></p><p><p>(4) $ (selector). eq (index) returns the first few jquery objects in selector, This method is similar to $ (selector). get (index), but $ (selector). get (index) The DOM element is Returned.</p></p><p><p></p></p><p><p>This is where you feel the code is worth Saying. The main is to give yourself a deeper impression and understanding of the tab.</p></p><p><p></p></p><p><p>Css,js Write Easy tab navigation</p></p></span>
