<!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. 【转】我是怎么找到电子书的 – IT篇

    多读书,提高自己 电子出版物 IT-ebooks http://it-ebooks.info/ 上万本英文原版电子书,大多数为apress和o'relly的.全都是文字版,体积小又清楚.适合懂英文的人 ...

  2. 微信小程序登录

    一. 小程序不支持cookie会话 1. 通过传递与检验3rd_session来保持会话 2. 3rd_session可以执行'`head -n 80 /dev/urandom | tr -dc A- ...

  3. 使用React Native来撰写跨平台的App

    React Native 是一个 JavaScript 的框架,用来撰写实时的.可原生呈现 iOS 和 Android 的应用.其是基于 React的,而 React 是 Facebook 的用于构建 ...

  4. 测试部署环境用到的主要linux命令

    1 部署前检查开发是否上传部署文档 2 在测试组中告知大家 3 将上一版本进行备份(cp -r neiguan-tomcat/ /home/personal/backup/neiguan-tomcat ...

  5. WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图（转载）

    WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图 1.前言 在前面我花了两个篇幅来讲解行列号的获取,也解释了为什么要获取行列号.在这一章,我将把常见的几种请求瓦片时的URL样式罗列出来,并 ...

  6. 在官网下载了最新版的PHP，解压后的安装包里为什么没有php5isapi.dll这个dll文件？

    因为自PHP 5.3.1版本开始,PHP便已不在支持ISAPI模式,所以你在PHP5.3.1版本以上的php目录中看不到php5isapi.dll文件. 那么,IIS6下跑PHP 5.3.1以上版本时 ...

  7. apache的工作模式 和 最大连接数设置

    经过测试 效果明显 (1)首选查看apache的工作模式 windows下的查看apache的工作模式命令:httpd -l 如果列出mod_win32.c,则表示是 win32.c 工作方式. 列出 ...

  8. DELPHI删除记录文件

    http://blog.itpub.net/729024/viewspace-564890/ DBGrid1.SelectedRows.Delete;

  9. BNU Online Judge-29140

    题目链接 http://www.bnuoj.com/bnuoj/problem_show.php?pid=29140 看到这样的题,应该想到an  与an-1  的关系,他们是会有关系的你要去找 代码 ...

  10. V8 Javascript 引擎设计理念

    Netscape Navigator 在 90 在年代中期对 JavaScript 进行了集成,这让网页开发人员对 HTML 页面中诸如 form .frame 和 image 之类的元素的访问变得非 ...