<!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. iPhone Info.plist属性说明

    1.) <key>BadgeStyle</key> 设置这个属性就是修改通知标记 出现在未接电话短信邮件的那个小数字 可以改变字体 颜色 位置等 2.) <key> ...

  2. Thinking in scala (7)---- f(n)=f(n-1)+2f(n-2)+3f(n-3)

    <计算机程序的构造和解释>中的练习1.11: 函数f,如果n<3,那么f(n) = n;如果n>=3,那么 f(n)=f(n-1)+2f(n-2)+3f(n-3) 有了上面的公 ...

  3. 一种新的隐藏-显示模式诞生——css3的scale(0)到scale(1)

    .dropdown-menu {  background: rgba(255, 255, 255, 0.98) none repeat scroll 0 0;  box-shadow: 0 1px 2 ...

  4. 如何解决Ajax跨域问题-1

    如何解决Ajax跨域问题 最近在做AJAX调用C的问题,出现跨域问题,学习总结如下: 在做ajax读取数据的时候,经常会遇到ajax需要跨域的问题,但由于浏览器安全方面的限制,XMLHttpReque ...

  5. C# 存储过程使用方法

                CREATE PROCEDURE [dbo].[GetNameById] @studentid varchar(8), @studentname nvarchar(50) OU ...

  6. js原生设计模式——9外观模式封装2(小型代码库YJ)

    <script type="text/javascript">    //小型代码库YJ封装    var YJ = {        //根据id获取元素       ...

  7. HTTP协议缓存策略深入详解之ETAG妙用

    Etag是什么: Etag 是URL的Entity Tag,用于标示URL对象是否改变,区分不同语言和Session等等.具体内部含义是使服务器控制的,就像Cookie那样. HTTP协议规格说明定义 ...

  8. cygwin下配置alias

    主要是cygwin下的盘符映射关系容易忘,直接用mount命令: 所以,找到E:\cygwin64\home\Administrator下面的.bashrc,添加alias.如下:

  9. HDFS存储系统

    HDFS存储系统 一.基本概念 1.NameNode HDFS采用Master/Slave架构.namenode就是HDFS的Master架构.主要负责HDFS文件系统的管理工作,具体包括:名称空间( ...

  10. spring mvc 返回页面数据

    handler package com.stone.controller; import java.util.Map; import javax.servlet.http.HttpServletReq ...