运用active和hover实现导航栏的页面切换
.nav ul li a:hover{
background: #3E6EDD;
}
.nav ul li a:hover img{
display: block;
}
.nav ul li a.active{ //注意此处是 .active
background: #3E6EDD;
}
.nav ul li a.active img{
display: block;
}
<div class="nav">
<ul>
<li><a href="file.html" class="active">首 页<img src="data:images/jiao.png" alt="" /></a></li>
<li><a href="zxft.html" >政务公开<img src="data:images/jiao.png" alt="" /></a></li>
<li><a href="jjdt1.html">网上办事<img src="data:images/jiao.png" alt="" /></a></li>
<li><a href="jjdt2.html">公众参与<img src="data:images/jiao.png" alt="" /></a></li>
<li><a href="##">宣传教育<img src="data:images/jiao.png" alt="" /></a></li>
</ul>
</div>
如上有五个链接,对应五个页面,但是导航栏一般都是固定的,只是要切换。在每一个页面上放一处class="active",而这一处对应的也就是自身页面的链接。
假设当前你看的页面是file.html,所以将class=”active“加到如上代码处。
假设你看的页面是zxft.html,则应将class=”active”加到<a href="zxft.html" class="active">处。
以此类推。
运用active和hover实现导航栏的页面切换的更多相关文章
- 简单的jquery左侧导航栏和页面选中效果
这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...
- 简单的jquery左侧导航栏和页面选中
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...
- jQuery实现简单导航栏的样式切换
style css样式部分: ul{ margin: 0 auto; height: 50px; background-color: #369;} ul>li{ text-decoration: ...
- jquery导航栏html页面跳转导航字体变色
html代码: <div class="collapse"> <ul class="nav"> <li><a href ...
- Android——Fragment实例精讲——底部导航栏+ViewPager滑动切换页面
说明: 实现效果: 1- 用ViewPager实现Fragmen之间的切换 2- 底部用RadioGroup实现,更方便的实现图片和字体颜色的改变,更方便的通过RadioButton的点击事件来控制页 ...
- CSS04--对齐、 布局、导航栏
我们接着上一章,继续学习一些有关对齐.布局.导航栏的内容. 1.水平块对齐: 1.1 margin:把左和右外边距设置为 auto,规定的是均等地分配可用的外边距.结果就是居中的元素 .c ...
- Bootstrap<基础十七>导航栏
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- BootStrap导航栏的使用
默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...
- Bootstrap-CL:导航栏
ylbtech-Bootstrap-CL:导航栏 1.返回顶部 1. Bootstrap 导航栏 导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页 ...
随机推荐
- linux 下的常用操作命令
一,Linux的介绍 略. 二,文件类的常用命令 三,权限类的常用命令
- 阅读别人的程序(Java篇)
1.递归求数组最大值 2.转账(事务) 1.递归应用 public class DiGuiDemo3 { public static void main(String[] args) { int[] ...
- hello-R
#print start { #: is array :) { print(:i) } } #print end #if start { x<- ) print(x) else print(&q ...
- 《算法》第四章部分程序 part 7
▶ 书中第四章部分程序,包括在加上自己补充的代码,图中找欧拉环 ● 无向图中寻找欧拉环 package package01; import edu.princeton.cs.algs4.StdOut; ...
- WebForm多页面传值跳转
一.URL传值 URL传值是利用跳转地址直接加变量定义内容 格式:跳转地址?任意变量=传的值--?=之间不能有空格 多条数据传值 在地址栏继续拼接&key=value void Button1 ...
- linux常用命令以及快捷键
find命令查找某些文件并将其拷贝到指定目录 [root@host lib]# find -name "*hbase*.jar" |xargs -i cp {} /root/aa ...
- Python基础4 迭代器、装饰器、软件开发规范
本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 孩子,我现在有个需 ...
- jqGrid pivot获取所有行包括小计数据及原码分析
1.结论:按正常jqGid获取,在中间加入以下代码,即将小计行当成改变为普能行,以便能让'getRowData'方法获取到,第三点会进行原码分析 //get all page grid data,in ...
- linux获取线程ID
pthread_self()获取当选线程的ID.这个ID与pthread_create的第一个参数返回的相同.但是与ps命令看到的不同,因此只能用于程序内部,用于对线程进行操作. #include & ...
- python-玉米(小米)商城作业
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...