html点导航栏换图片,jQuery点击导航栏选中更换样式的实现代码

废话不多说了，直接给大家贴代码了，具体代码如下所示：

new document

*{ 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;}

$(document).ready(function (){

$("li").each(function(index){

$(this).click(function(){

$("li").removeClass("first");

$("li").eq(index).addClass("first");

});

首页
列表
内容
联系
关于

html点导航栏换图片,jQuery点击导航栏选中更换样式的实现代码相关推荐

iOS开发导航栏渐变图片下拉放大导航栏移动仿QQ 微博知乎导航栏
开发中,我们时常会遇到导航栏颜色渐变,导航栏移动等功能;只需要复制以下系统和自定义导航栏代码到你新建的文件中,然后仿照试图控制器所举的例子使用即可,简单易用,别忘记在单例里面实现以下方法用以设置导航栏 ...
jquery 点击事件第一次点击选中第二次点击改变状态
jquery点击事件第一次选中:第二次消失 $("#myCard li").val(1); $("#myCard li").click(functio ...
jQuery Mobile中导航栏navbar的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中导航栏navbar的data-*选项 //带有 data-role="nav ...
html导航图片滚动条,CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在标签中让元素的宽度由0变化到100%,代码很简单,如下所示: CSS样式部分: ul.na ...
京东图片列表、左侧导航栏、网易新闻列表、京东页面布局、京东轮播图
文章目录京东图片列表京东左侧导航栏网易新闻列表: 京东页面布局京东轮播图京东图片列表代码如下: <head><meta charset="UTF-8" ...
把导航栏和图片无缝连接
// 导航栏和图片无缝兼容 self.navigationController.navigationBar.translucent = YES; UIColor *co ...
自定义导航栏背景图片和颜色
首先准备导航栏背景图片,大小 320x44, @2x文件大小640x88,iOS5以后更改背景图片较简单 UINavigationBar *navBar = self.navigationContro ...
HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
uni-app自定义tabBar；uni-app小程序自定义tabBar；uni-app小程序修改中间tabBar导航栏大小；uni-app中间导航栏凸起；uni-app修改底部导航栏
需求:要求小程序,中间的tabBar自定义凸起或者图标变大: 问题:查看uni-app的tabBar文档可知,小程序是不支持midButton的: 解决思路:隐藏uni-app原有的tabBar,然后 ...

html点导航栏换图片,jQuery点击导航栏选中更换样式的实现代码

html点导航栏换图片,jQuery点击导航栏选中更换样式的实现代码相关推荐

最新文章

热门文章