jqu操作class 实现动态导航菜单

来源：互联网发布：猎杀潜航手机版 java 编辑：程序博客网时间：2024/05/16 12:50

 html部分代码

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS-JQuery Menu01</title><link rel="stylesheet" type="text/css" href="css/menu.css"/><script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script><script type="text/javascript" src="JQuery/menu.js"></script></head><body><div class="menu outer">    <div class="inner">        <ul>            <li class="selected" style="background:none;"><a href="#">首页</a></li>            <li><a href="#">新闻</a></li>            <li><a href="#">体育</a></li>            <li><a href="#">财经</a></li>            <li><a href="#">汽车</a></li>            <li><a href="#">房产</a></li>            <li><a href="#">股市</a></li>            <li><a href="#">旅游</a></li>            <li><a href="#">美食</a></li>            <li><a href="#">女性</a></li>            <li><a href="#">播客</a></li>            <li><a href="#">拼客</a></li>            <li><a href="#">交友</a></li>            <li><a href="#">大杂烩</a></li>        </ul>    </div></div></body></html>

2.JQuery/menu.js$(function(){    var span = '<span></span>';    $('.menu li a').wrapInner(span);       $('.menu li').click(function(){        $(this).addClass('selected') .siblings().removeClass('selected');    });});

.siblings(). 这个函数方法说明一下这是便利所有拥有'selected‘的兄弟子元素然后再移除这个类

查看图片附件

0 0