新手求助，导航栏点击后改变样式效果
展开全部
<style type="text/css">
ul li{
list-style:none;
float:left;
border:1px solid red;
padding:5px 10px;
background-color:#ccc;
font-size:20px;
}
li:hover{
cursor:pointer;
}
.cname{
background-color:blue;
}
</style>
上面这是css样式
<script type="text/javascript">
$(function(){
$("ul li").click(function(){
$("ul li").removeClass('cname');
$(this).addClass('cname');
});
});
</script>
这是jquery代码 在使用的是 需要加载jquery库
<body>
<ul>
<li>保险</li>
<li>金融</li>
<li>证券</li>
<li>银行</li>
</ul>
</body>
这样就能实现基本的效果了
ul li{
list-style:none;
float:left;
border:1px solid red;
padding:5px 10px;
background-color:#ccc;
font-size:20px;
}
li:hover{
cursor:pointer;
}
.cname{
background-color:blue;
}
</style>
上面这是css样式
<script type="text/javascript">
$(function(){
$("ul li").click(function(){
$("ul li").removeClass('cname');
$(this).addClass('cname');
});
});
</script>
这是jquery代码 在使用的是 需要加载jquery库
<body>
<ul>
<li>保险</li>
<li>金融</li>
<li>证券</li>
<li>银行</li>
</ul>
</body>
这样就能实现基本的效果了
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
