<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>事件委托</title>

<style>

.nav { margin:20px auto; height:30px;}

li.active {background:#ff4c76;}

li { list-style:none; margin-right:20px; float:left;}

li a { text-decoration:none; color:#555;}

</style>

<script src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

$(function(){

/*$("ul li").click(function(){

$(".active").removeClass("active");

$(this).addClass("active");

});*/

$(".nav").on('click','ul li',function(){

$(".active").removeClass("active");

$(this).addClass("active");

});

});

</script>

</head>

<body>

<div class="nav">

<!-- <ul><li class="active"><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>

</body>

</html>

<script>

$(function(){

$(".nav").html('<ul><li class="active"><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>');

});

</script>

<!--方法二-->

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery实现导航菜单</title>

<style>

body,div,ul,li,a { font-size:14px; color:#555; margin:0;padding:0;}

.nav { margin:50px 50px; width:100%;height:30px;}

li { list-style:none; float:left; margin-right:20px;}

li a { text-decoration:none;}

li.active { background:red;}

</style>

<script src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

$(function(){

$("ul li").click(function(){

/*$(".active").removeClass("active");

$(this).addClass("active");*/

$(".active").removeClass("active");

$(this).addClass("active");

});

});

</script>

</head>

<body>

<div class="nav">

<ul>

<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>

</body>

</html>

jquery实现横向导航的更多相关文章

  1. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  2. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

  3. 我收集到的最好的jQuery和CSS3导航菜单

    jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...

  4. 动漫网站基于jquery的横向手风琴特效

    今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  5. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  6. 如何使用css、布局横向导航栏

    使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...

  7. web标准(复习)--7 横向导航菜单

    今天我们开始学习html列表,包含以下内容和知识点: 横向列表菜单 用图片美化的横向导航 css Sprites 一.横向列表菜单前边学习过纵向导航菜单,又学习了float属性,那么要实现横向导航菜单 ...

  8. 【微信小程序开发】快速开发一个动态横向导航模板并使用

    目标:做个横向导航,可以横向滚动. 思路:使用scroll-view组件,可实现横向滚动功能.scroll-view内包含一个动态的view列表,代表导航的每一项,导航要接收动态数组,然后使用列表展示 ...

  9. 利用js和JQuery定义一个导航条菜单

    利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...

随机推荐

  1. DownloadManager 版本更新，出现 No Activity found to handle Intent 的解决办法

    项目中,进行版本更新的时候,用的是自己写的下载方案,最近看到了使用系统服务 DownloadManager 进行版本更新,自己也试试. 在下载完成以后,安装更新的时候,出现了一个 crash,抓取的 ...

  2. Treap初步

    模板题 bzoj3224: Tyvj 1728 普通平衡树 #include <bits/stdc++.h> #define rep(i, a, b) for (int i = a; i ...

  3. 【noip】华容道

    描述 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间. 小 B 玩的华容道与经典的 ...

  4. 【转】Linux目录下/dev/shm的理解和使用

    一般来说,现场部署  都要根据内存的大小来设定/dev/shm的大小,大部分使用的是默认的值! Linux目录下/dev/shm的理解和使用 [日期:2014-05-16] 来源:Linux社区  作 ...

  5. <!DOCTYPE> 声明 引发的错误

    <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. 在写模板的时候,因为最近开始给每个文件添加注释,无意中将注释写在文件的第一行.导致页面 ...

  6. Linux - tomcat -jndi数据源配置

    Linux - tomcat -jndi数据源配置 tomcat/conf/context .xml 文件中修改如下 <Resource name="/jdbc/--" au ...

  7. BZOJ2698染色

    2698: 染色 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 223  Solved: 150[Submit][Status][Discuss] De ...

  8. 微软2017MVP大礼包拆箱攻略

    容我本周偷个懒,晒个大礼包就糊弄过去了.13号晚上拿到的大礼包,激动的没敢拆,一直等到娃睡着了,才偷偷打开了快递,忍了两天没忍住,上来晒图得瑟一下,请各位轻拍,谢谢! 1.大礼包的盒子(联邦快递的盒子 ...

  9. Mysql 多列形成主键（复合主键 ）

    什么是数据表的复合主键 所谓的复合主键 就是指你表的主键含有一个以上的字段组成 比如 create table test (    name varchar(19),    id number,    ...

  10. 一段神奇的代码-关于PHP字符变量奇怪现象的解释

    首先神奇的PHP是支持字符数据类型的,有同学就写了这样一段代码: for ($c = 'a'; $c <= 'z'; $c++) { echo $c . ' '; } 然而结果却不是他想要的a到 ...