jquery點選切換 頁面多個點選切換 代碼封裝

<code>//點選切換</code>

<code>$(</code><code>function</code><code>(){</code>

<code>    </code><code>$(</code><code>".nav-left ul li"</code><code>).click(</code><code>function</code><code>(){    </code><code>//點選切換1</code>

<code>        </code><code>tabChange($(</code><code>this</code><code>),$(</code><code>".forum-container &gt; div"</code><code>)); </code><code>//内容頁籤</code>

<code>    </code><code>})</code>

<code>    </code><code>$(</code><code>".dynamic-title ul li "</code><code>).click(</code><code>function</code><code>(){            </code><code>//點選切換2</code>

<code>        </code><code>tabChange($(</code><code>this</code><code>),$(</code><code>".dynamic-container &gt; div"</code><code>));</code>

<code>    </code><code>$(</code><code>".tt-personal ul li "</code><code>).click(</code><code>function</code><code>(){</code>

<code>        </code><code>tabChange($(</code><code>this</code><code>),$(</code><code>".formPer-con &gt; div"</code><code>));</code>

<code>    </code><code>$(</code><code>".forum-search-left ul li "</code><code>).click(</code><code>function</code><code>(){</code>

<code>        </code><code>tabChange($(</code><code>this</code><code>),$(</code><code>".forum-search-right &gt; div"</code><code>));</code>

<code>})</code>

<code>//切換代碼</code>

<code>function</code> <code>tabChange(obj1,obj2){</code>

<code>    </code><code>var</code> <code>num = obj1.index(); </code><code>// 擷取目前點選的&lt;li&gt;元素 在 全部li元素中的索引。</code>

<code>    </code><code>obj1.addClass(</code><code>"dynamic-active"</code><code>)            </code><code>//目前&lt;li&gt;元素高亮</code>

<code>    </code><code>.siblings().removeClass(</code><code>"dynamic-active"</code><code>);  </code><code>//去掉其它同輩&lt;li&gt;元素的高亮</code>

<code>    </code><code>//選取子節點。不選取子節點的話，會引起錯誤。如果裡面還有div </code>

<code>    </code><code>obj2.eq(num).show()   </code><code>//顯示 &lt;li&gt;元素對應的&lt;div&gt;元素</code>

<code>    </code><code>.siblings().hide(); </code><code>//隐藏其它幾個同輩的&lt;div&gt;元素  </code>

<code>}</code>

<code></code>

本文轉自  小旭依然  51CTO部落格，原文連結:http://blog.51cto.com/xuyran/1863003