如何实现 css 鼠标点击a标签由样式1变为样式2
发布网友
发布时间：2022-04-20 07:46
共6个回答
热心网友
时间：2022-04-19 08:02
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
.menu{border-bottom: 1px solid #ccc;}
.menu a{
width: 120px;
height: 50px;
text-decoration: none;
display: block;
float: left;
text-align: center;
line-height: 50px;
}
.on{ border:1px solid #ccc;}
</style>
<script>
$(function(){
$(".menu a").click(function(){
$(this).addClass("on").siblings().removeClass("on");
});
});
</script>
<body>
<div class="menu">
<a href="#" class="on">栏目一</a>
<a href="#">栏目二</a>
<a href="#">栏目三</a>
<a href="#">栏目四</a>
</div>
</body>
</html>
热心网友
时间：2022-04-19 09:20
****样式一
a{
color: #ccc;
font-size: 12px;
}
****样式二 鼠标放上去的时候
a:hover{
color: #f66;
font-size: 14px;
}
****样式三 鼠标点击过后的样式
a:visited{
color: pink;
}
****样式四 鼠标点击链接的样式
a:active{
font-size:10px;
}
热心网友
时间：2022-04-19 10:54
.style1 { color:#000 ;} 同时准备样式2 .style2{ color:#fff ;}
在脚本事件中为a绑定点击事件：var a = document.getElementById("a");
a.onclick= function (){a.className = "style2"; }
热心网友
时间：2022-04-19 12:46
<html>
<head>
<meta charset="utf-8">
<title>锚链接</title>
<style type="text/css">
*{ margin:0; padding:0;}
a{ text-decoration:none; color:#333; transition:all .3s;}
img{ border:0;}
.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after{ display:table; line-height:0; content:'';}
.clearfix:after{ clear:both;}
.box{ width:100%;border-bottom:2px solid #2FB860}
ul{ width:1000px; margin:0 auto}
ul li{ list-style:none; float:left;}
ul li a{ display:block; padding:20px;}
ul li a:hover {background: #2FB860;color: #FFF;}
ul li a.hover {background: #2FB860;color: #FFF;}
.box1{ width:100%; height:auto;}
.box1 .con{ width:1000px; height:800px; margin:0 auto; overflow:hidden; position:relative;}
.box1 .con .con-box{ position:absolute; left:0; top:0;}
.box1 .con .con-box p{ width:100%; height:800px;}
</style>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div class="box">
<ul class="clearfix">
<li><a href="javascript:void(0)" class="hover">这是第一个</a></li>
<li><a href="javascript:void(0)">这是第二个</a></li>
<li><a href="javascript:void(0)">这是第三个</a></li>
<li><a href="javascript:void(0)">这是第四个</a></li>
<li><a href="javascript:void(0)">这是第五个</a></li>
<li><a href="javascript:void(0)">这是第六个</a></li>
</ul>
</div>
<div class="box1">
<div class="con">
<div class="con-box">
<p><a href="javascript:void(0)">这是第一个</a></p>
<p><a href="javascript:void(0)">这是第二个</a></p>
<p><a href="javascript:void(0)">这是第三个</a></p>
<p><a href="javascript:void(0)">这是第四个</a></p>
<p><a href="javascript:void(0)">这是第五个</a></p>
<p><a href="javascript:void(0)">这是第六个</a></p>
</div>
</div>
</div>
<script type="text/javascript">
$("li").click(function(){
var index =$(this).index();
$(this).find("a").addClass("hover").parent().siblings().find("a").removeClass("hover");
$(".con-box").stop().animate({top:-(800*index)+"px"},500);
})
</script>
</body>
</html>
热心网友
时间：2022-04-19 14:54
<style>
div{width:200px;height:200px;}
.cls1{background-color:red;}
.cls2{background-color:blue}
</style>
<script>
$('#div1').click(function(){
$(this).removeClass('cls1');
$(this).addClass('cls2');
});
</script>
<div id="div1" class="cls1">点击<div>
主要是你的样式 要先写好。我写的这个是最简单的。 当然也可以用纯的js来动态赋值动态处理
热心网友
时间：2022-04-19 17:18
首先给A加个伪类active
比如a:active{color:red;}
z这样就变成红色了，
希望能帮到你（前端屋）
