a标签
来源：互联网 发布：淘宝电子商务公司起名 编辑：程序博客网 时间：2024/05/16 04:21
有些页面模板 实现了掠过改变样式（比如高亮），点击改变样式 效果。
实现如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>鼠标移到导航上面 当前的LI变色 处于当前的位置</title>
<style type="text/css">
ul,li{list-style:none;}
#nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;}
#nav li.h_nav_over{background:red;color:#fff;}
#nav li.h_nav_over a{color:#fff;}
a{text-decoration:none;}
.level a.light{background:SkyBlue ;color:#fff;}
.level a.clicked_{background:red ;color:#eee;}
</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type = "text/javascript" >
function firstShow(){
$(".firstChilds").toggle();
}
function secondShow(){
$(".secondChild").toggle();
}
function thirdShow(){
$(".thirdChilds").toggle();
}
$(function() {
$("#nav>ul>li").mouseover(function() {
//$("#nav>ul>li").each(function(i) {
// var children = this.childNodes;
// $(this).removeClass("h_nav_over");
//});
$(this).addClass("h_nav_over");
//$(this).trigger('click');
}).mouseout(function() {
$(this).removeClass("h_nav_over");
});
$(".level a").mouseover(function(){
$(".level a").each(function(i) {
$(this).removeClass("clicked_");
});
//console.info($(this));
$(this).addClass("light");
}).mouseout(function() {
$(this).removeClass("light");
}).click(function(){
$(".level a").each(function(i) {
$(this).removeClass("light");
$(this).removeClass("clicked_");
});
$(this).addClass("clicked_");
console.info($(this));
return false;
});
}); </script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.baidu.com" target="_blank">首页</a></li>
<li><a href="http://www.163.com/" >品牌商机</a></li>
<li><a href="#">精品商机 </a></li>
<li><a href="#">最新商机 </a></li>
<li><a href="#">投资考察会</a></li>
<li><a href="#">在线交流区</a></li>
</ul>
</div>
<div id="Menu">
<ul id="MenuUL" style="list-style:none">
<li id="caseUser" class="level" >
<br><br>
<a href="" target="main" style="text-decoration:none;color: black;"><font style="font-size:15px;font-weight: bold;">第1个页签 </font></a><br>
</li>
<li id="caseAdmin" class="level">
<br><br>
<a href="" target="main" style="text-decoration:none;color: black;"><font style="font-size:15px;font-weight: bold;">第2个页签 </font></a><br>
</li>
<li id="messageBook" class="level">
<br><br>
<a href="" target="main" align="left" style="text-decoration:none;color: black;"><font style="font-size:15px;font-weight: bold;">第3个页签 </font></a><br>
</li>
<li id="securityManager" class="level">
<br><br>
<a href="javascript:void(0)" target="main" align="left" style="text-decoration:none;color: black;" onclick="firstShow()" ><font style="font-size:15px;font-weight: bold;">第4个页签 </font></a><br>
<ul style="list-style:none">
<li class="firstChilds" class="level">
<br>
<a href="" target="main" align="left" style="text-decoration:none;color: black;"><font style="font-size:15px;font-weight: bold;">第41个页签 </font> </a><br>
</li>
<li class="firstChilds" class="level">
<br>
<a href="" target="main" align="left" style="text-decoration:none;color: black;"><font style="font-size:15px;font-weight: bold;">第42个页签 </font> </a><br>
</li>
<li class="firstChilds" class="level">
<br>
<a href="" target="main" align="left" style="text-decoration:none;color: black;"><font style="font-size:15px;font-weight: bold;">第43个页签</font> </a><br>
</li>
<li class="firstChilds" class="level">
<br>
<a href="" target="main" align="left" style="text-decoration:none;color: black;"><font style="font-size:15px;font-weight: bold;">第44个页签</font> </a><br>
</li>
</ul>
</li>
<li id="smsQuery" class="level">
<br><br>
<a href="" target="main" align="left" style="text-decoration:none;color: black;" ><font style="font-size:15px;font-weight: bold;">第5个页签 </font> </a><br>
</li>
<li id="dataExportManager" class="level">
<br><br>
<a href="javascript:void(0)" target="main" align="left" style="text-decoration:none;color: black;" onclick="secondShow()" ><font style="font-size:15px;font-weight: bold;">第6个页签 </font> </a><br>
<ul style="list-style:none">
<li class="secondChild" class="level">
<br>
<a href="" target="main" align="left" style="text-decoration:none;color: black;"><font style="font-size:15px;font-weight: bold;">第61个页签</font> </a><br>
</li>
<li class="secondChild" class="level">
<br>
<a href="" target="main" align="left" style="text-decoration:none;color: black;"><font style="font-size:15px;font-weight: bold;">第62个页签</font> </a><br>
</li>
<li class="secondChild" class="level">
<br>
<a href="" target="main" align="left" style="text-decoration:none;color: black;"><font style="font-size:15px;font-weight: bold;">第63个页签</font> </a><br>
</li>
</ul>
</li>
<li id="caseUser_outPack" class="level">
<br><br>
<a href="javascript:void(0)" target="main" align="left" style="text-decoration:none;color: black;" onclick="thirdShow()" ><font style="font-size:15px;font-weight: bold;">第7个页签 </font></a><br>
<ul style="list-style:none">
<li class="thirdChilds" class="level">
<br>
<a href="" target="main" align="left" style="text-decoration:none;color: black;"><font style="font-size:15px;font-weight: bold;">第71个页签 </font> </a><br>
</li>
<li class="thirdChilds" class="level">
<br>
<a href="" target="main" align="left" style="text-decoration:none;color: black;"><font style="font-size:15px;font-weight: bold;">第72个页签</font> </a><br>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
官方文档
http://www.w3school.com.cn/tags/tag_a.asp
http://www.runoob.com/tags/tag-a.html
- a标签
- a标签
- A标签
- a标签
- a标签
- <a>标签
- <a>标签
- a标签
- a标签
- a标签嵌套a标签
- <a>标签<form>标签
- a标签与span标签
- HTML<a>标签，<img>标签
- a标签样式 和 a标签属性
- A 标签样式
- a标签target试验
- a标签target属性
- a标签的target
- /etc/fstab 参数详解及如何设置开机自动挂载
- 两种方式编译php
- asp.net中解决json跨域访问问题
- POJ 2296 Map Labeler / ZOJ 2493 Map Labeler / HIT 2369 Map Labeler / UVAlive 2973 Map Labeler
- Scala option类型和偏函数
- a标签
- 聚类算法（基础及核心概念）
- Redis简介，安装和配置，停止，卸载（图解方式）
- C++位段
- /etc/login.defs 文件内容及其解释
- 过滤器Filter
- 常用web组件
- vs2013 + Qt 5.6 + caffe — Qt 调用 caffe 生成的静态链接库用到自己的工程（项目）中
- request、response的常见用法
