<!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. HMC5883L地磁传感器驱动

    霍尼韦尔 HMC5883L 是一种表面贴装的高集成模块,并带有数字接口的弱磁传感器芯片,应用于低成本罗盘和磁场检测领域.HMC5883L 包括最先进的高分辨率 HMC118X 系列磁阻传感器,并附带霍 ...

  2. Góra urządzenia z dwoma zwiększyć moc może sprawić

    Zaprojektowany z rzeczywistym komfortu i łatwości od sportowca w swoim umyśle, kolejna edycja ze wzr ...

  3. 【转】101个MySQL调试和优化技巧

    MySQL是一个功能强大的开源数据库.随着越来越多的数据库驱动的应用程序,人们一直在推动MySQL发展到它的极限.这里是101条调节和优化MySQL安装的技巧.一些技巧是针对特定的安装环境的,但这些思 ...

  4. leetcode--012 single number I

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0MAAADGCAIAAACfN8xOAAAZ6UlEQVR4nO3dsZKcurbG8fNOnd1nIv

  5. Memcached源码分析之请求处理（状态机）

    作者:Calix 一)上文 在上一篇线程模型的分析中,我们知道,worker线程和主线程都调用了同一个函数,conn_new进行事件监听,并返回conn结构体对象.最终有事件到达时,调用同一个函数ev ...

  6. Java学习(一)

    各种原因就开始java开发快一个月了.一直也没有正式记录一下...现在开始..O(∩_∩)O~.... 先小结一下学习以来遇到的几个问题: 1.myeclipse的常用快捷键: F2当鼠标放在一个标记 ...

  7. 通过div模拟table

    参考: https://css-tricks.com/complete-guide-table-element/ 不要使用内联样式,但只是为了了解这里是如何去: <section style=& ...

  8. java基础（一）面向对象

    对象就是事物存在的实体,例如:人类,计算机等:而对象被分为两个部分,既动态与静态 类:就是同一事物的统称,如果将世界中的一个事物抽象成对象,类就是这类对象的统称,具有相同特性和行为的一类事物就是类. ...

  9. LDA 线性判别分析

    LDA, Linear Discriminant Analysis,线性判别分析.注意与LDA(Latent Dirichlet Allocation,主题生成模型)的区别. 1.引入 上文介绍的PC ...

  10. python pandas dataframe to_sql方法error及其解决

    今天遇到了一个问题,很是奇怪,自己也想了一个另类的方法将其解决了,现在将详细过程经过记录如下: 我在处理完一个dataframe之后,需要将其写回到数据库.这个dataframe比较大,共有53列,7 ...