概述
导航菜单样式
创建时间：2014-5-27 16:40
修改时间：2014-5-27 16:50
来源：
CSS样式中加入
<style>
.navlist
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
}
.navlist ul, .navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
.navlist a:link, .navlist a:visited
{
background: #CCFF;
border: 1px solid #ccc;
color: #666;
float: left;
font-size: small;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
outline: none;
}
.navlist a.cik
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
.navlist a:hover
{
color: #f00;
}
</style>
页面上：
<ul class="navlist">
<li><a id="defau" href="ModelInfoList.aspx?RightFramePage=ModelFaultStatistics" target="Right">
<span>缺陷统计</span></a></li>
<li><a href="ModelInfoList.aspx?RightFramePage=ModelLabStatistics" target="Right"><span>
实验统计</span></a></li>
jquery
//鼠标点击后，当前页面的标签字体显示不同的颜色。
$(document).ready(function() {
$("#defau").addClass("cik");
$(".navlist a").click(function() {
$(".navlist a").removeClass("cik");
$(this).addClass("cik");
});
});
原文链接：http://note.youdao.com/share/?id=0f1e2e9d1da6c9612aecb279598aa30e&type=note
感谢yy分享
最后
以上就是高挑鸡翅为你收集整理的导航菜单样式的全部内容，希望文章能够帮你解决导航菜单样式所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复