天天看点

Jquery给当前页或者跳转后页面的导航栏添加选中后样式

解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失;另一种情况是即使刷新页面后样式仍然有效。

直接上代码:

第一种情况:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<code>&lt;</code><code>script</code>

<code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"templets/js/jquery.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt; </code>

<code>type</code><code>=</code><code>"text/javascript"</code><code>&gt; </code>

<code>$(document).ready(function(){ </code>

<code>    </code><code>$(".nav a").each(function(){ </code>

<code>        </code><code>$(this).click(function(){ </code>

<code>            </code><code>$(".nav .hover").removeClass("hover"); </code>

<code>            </code><code>$(this).addClass("hover");   </code>

<code>            </code><code>return false;//防止页面跳转 </code>

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

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

<code>}); </code>

<code>&lt;/</code><code>script</code><code>&gt; </code>

<code>  </code> 

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"nav"</code><code>&gt; </code>

<code>&lt;</code><code>ul</code><code>&gt; </code>

<code>    </code><code>&lt;</code><code>li</code><code>&gt;&lt;</code><code>a</code>

<code>href</code><code>=</code><code>"1.html"</code> <code>class</code><code>=</code><code>"hover"</code><code>&gt; 首页&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt; </code>

<code>href</code><code>=</code><code>"2.html"</code><code>&gt; 个人资料&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt; </code>

<code>href</code><code>=</code><code>"3.html"</code><code>&gt; 我的好友&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt; </code>

<code>href</code><code>=</code><code>"4.html"</code><code>&gt; 消息管理&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt;  </code>

<code>&lt;/</code><code>ul</code><code>&gt;    </code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

第二种情况:

<code>        </code><code>$this = $(this); </code>

<code>        </code><code>if($this[0].href==String(window.location)){ </code>

<code>            </code><code>$this.addClass("hover"); </code>

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

<code>href</code><code>=</code><code>"1.html"</code><code>&gt; 首页&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>li</code><code>&gt; </code>

<code>&lt;/</code><code>div</code><code>&gt; </code>