JS当前菜单高亮显示，怎么弄啊

JavaScript027

JS当前菜单高亮显示，怎么弄啊,第1张

写了，你看看，觉得可以欢迎采纳

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<title>Document</title>

<style>

.navigation

{

width:200px

height:30px

background: #ccc

border:1px solid #ccc

padding: 0

margin: 50px

}

.navigation ul

{

width:200px

height:30px

margin: 0

padding: 0

list-style-type: none

}

.navigation ul li

{

width:80px

height:30px

margin: 0

padding: 0

float: left

text-align: center

line-height: 30px

}

.navigation ul li a

{

text-decoration: none

margin: 0

}

.navigation ul li.active

{

background: #f90

}

</style>

<script>

window.onload=function()

{

        var aLi=document.getElementsByTagName('li')

        for(var i=0i<aLi.lengthi++)

        {

         //鼠标移入设置class为active

         aLi[i].onmouseover=function()

         {

         this.className='active'

         }

         //鼠标移出去掉class

         aLi[i].onmouseout=function()

         {

         this.className=''

         }

        }

}

</script>

</head>

<body>

<div class="navigation" >

        <ul>

            <li>

                <a href="/">首页</a>  

            </li>

            <li>

                <a href="/jianshenfangfa/">健身方法</a>      

            </li>                             

       </ul>

    </div>

</body>

</html>

实现这个效果需要CSS的配合，关键是用JS为当前点击对象添加高亮的样式，并移除其他对象的高亮样式。举例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#nav li {float: leftwidth: 80pxtext-align: centerlist-style-type: none}

.nav-active {background: #369}

.nav-active a {color: #fff}

</style>

</head>

<body>

<ul id="nav">

<li class="nav-active"><a href="javascript:">首页</a></li>

<li><a href="javascript:">导航一</a></li>

<li><a href="javascript:">导航二</a></li>

<li><a href="javascript:">导航三</a></li>

<li><a href="javascript:">导航四</a></li>

</ul>

<script src="

<script>

$('#nav').find('li').click(function() {

// 为当前点击的导航加上高亮，其余的移除高亮

$(this).addClass('nav-active').siblings('li').removeClass('nav-active')

})

</script>

</body>

</html>