<!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. Java中的Runtime类

    Runtime类描述了虚拟机一些信息.该类采用了单例设计模式,可以通过静态方法 getRuntime()获取Runtime类实例.下面演示了获取虚拟机的内存信息: package Main; publ ...

  2. IO的五种模型

    为了区分IO的五种模型,下面先来看看同步与异步.阻塞与非阻塞的概念差别. 同步:所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回.按照这个定义,其实绝大多数函数都是同步调用(例如 ...

  3. S3C2440的SPI解析

    位串行数据的频率.如果只希望发送,则接收数据可以保持伪位(dummy).此外如果只希望接收,则需要发送伪位'1'数据 使用SPI主要需要以下寄存器 选择SPI模式,中断模式,查询模式等SCK选择,主从 ...

  4. select into from 和 insert into select 的用法

    SELECT INTO 和 INSERT INTO SELECT 两种表复制语句 Insert是T-sql中常用语句,Insert INTO table(field1,field2,...) valu ...

  5. window下Git和github入门

    tip:使用简单的例子来制作一个使用指南过程,默认文件夹为demo.看了3个早晨,写一下留个记录,可能有些不成熟,如有错误欢迎指正. 参考一:http://www.liaoxuefeng.com/wi ...

  6. 五 Android Capabilities讲解

    1.Capabilities介绍 可以看下之前代码里面设置的capabilities DesiredCapabilities capabilities = new DesiredCapabilitie ...

  7. FarPoint Spread ChildView子视图

    有一种需求场景在很多地方都会用到,就是父子关系(头表和子表的关系),比如订单和订单明细. 做过winform的朋友第spread控件应该比较熟悉,或者了解.他的展示方式就通过一个关联关系就可以了,下面 ...

  8. JavaScript实用功能代码片段

    把平时网站上常用的一些实用功能代码片段通通收集起来,方面网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作效率. 1.原生JavaScript实现字符串长度截取 function cutst ...

  9. 前端MVVM框架：Knockout.JS（一）

    前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScrip ...

  10. 7-1 vim 编辑器

    1. vi:visual interface. 1. vim:vi improved 这些都属于全屏编辑器,又是模式化编辑器 vim模式(3种) 编辑模式(命令模式) 输入模式 末行模式 模式转换 编 ...