jquery点击导航栏选中更换样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<body>
<style>
*{ margin:0; padding:0; border:0px; list-style:none; margin:0 auto;}
*a { text-decoration:none; color:#FFF;}
ul { width:800px; height:30px; background-color:#C33;}
ul li { float:left; width:160px; height:30px; line-height:30px; text-align:center; color:#FFFFFF;}
ul li a { color:#FFFFFF; display:block; width:160px; height:30px; text-decoration:none;}
.first { background-color:#0000FF;}
ul li a:hover {color:#FFF; display:block; width:160px; height:30px; text-decoration: underline; background-color:#03F;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
$("li").each(function(index){
$(this).click(function(){
$("li").removeClass("first");
$("li").eq(index).addClass("first");
});
});
});
</script>
</head>
<body>
<ul>
<li class="first"><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>
</body>
</html>
</body>
</html>
jquery点击导航栏选中更换样式的更多相关文章
- jquery侧边折叠导航栏制作,两行代码搞定
jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...
- Jquery实现动态导航栏和轮播导航栏
动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...
- 【1-4】jQuery代码风格-导航栏
实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...
- HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚
导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...
- 在CSS中定义【导航栏】超链接样式
1.案例css代码 <style> .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标 ...
- jquery版滑块导航栏
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...
- jQuery实现简单导航栏的样式切换
style css样式部分: ul{ margin: 0 auto; height: 50px; background-color: #369;} ul>li{ text-decoration: ...
- JQuery Mobile - 导航栏选中状态代码
class="ui-btn-active" 参考: https://wizardforcel.gitbooks.io/w3school-jqmobile/content/8.htm ...
- 导航菜单:jQuery粘性滚动导航栏效果
粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...
随机推荐
- UItextInput-Protocol
UItextInput是一个protocol,一般来说,文字处理的控件都要遵守这个协议.如UITextField,UITextView.下面介绍一些文字处理的基本概念. marked text 对于多 ...
- 本地搭建GitLab
现在很多企业都开始使用gitLab,因为他的权限管理强大,后台项目管理也很方便.下面就介绍本地搭建方法: 为避免损失,建议在虚拟机测试.虚拟机最低配置(内存2G,cpu:2核,硬盘:20G) 1.安装 ...
- Git的一些用法(下)
(4) 提交分支 提交分支命令 : 将本地的分支提交到 GitHub中; git push origin experiment (5) 分支合并移除 合并分支命令 : 合并分支之后, 分支中有的文件在 ...
- 【手记】如果Idx/Sub字幕导不进MKVToolNix,看看是否这个原因
用记事本之类的文本编辑器打开idx文件,看看时间轴部分是不是存在不规范的条目,比如: timestamp: :::, filepos: 注意,上述条目中,filepos:后面缺了一个空格,就这么一处问 ...
- 修改testng源码,添加beforeMethod和afterMethod中的日志到test中(可以不改源码,废弃)
在使用testng生成报告的时候,只会记录test方法中的日志,但是一般会在beforeMethod.beforeTest.afterMethod.afterTest中做一下数据的处理,这里面的日志没 ...
- Service与BoardcastReceive
开发service需要两个步骤: 1.定义一个继承Service的子类 2.在AndroidMainfest.xml文件中配置该Service. Service与Activity都是从Context派 ...
- windows平台下Android studio开发环境搭建教程
最近,Google 已宣布,为了简化 Android 的开发力度,以重点建设 Android Studio 工具,到今年年底将停止支持Eclipse等其他集成开发环境 .而随着Android stud ...
- awk练习
首先,了解awk的运行格式 awk '条件类型1{动作1} 条件类型2{动作2} ...' filename 1. [root@server3 mnt]# cat passwd root x 0 0 ...
- 移动端滑动时页面惯性滑动overflow-scrolling: touch
-webkit-overflow-scrolling:auto | touch; auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止 touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一 ...
- Unix_JDK安装及配置
CentOS 下过程 JDK 在 CentOS 和 Ubuntu 下安装过程是一样的,所以这里不再讲 Ubuntu 系统下的安装 JDK 1.8 下载 此时(20170906)最新版本:jdk-8u1 ...