如何实现 css 鼠标点击a标签由样式1变为样式2

样式1：样式2：

2024年11月30日 04:53

有5个网友回答

网友（1）：

网友（2）：

****样式一
a{
   color: #ccc;
   font-size: 12px;
}
****样式二鼠标放上去的时候
a:hover{
   color: #f66;
   font-size: 14px;
}
****样式三鼠标点击过后的样式
a:visited{
   color: pink;
}
****样式四鼠标点击链接的样式
a:active{
   font-size:10px;
}

网友（3）：

首先在css文件中设置对应的a标签样式1 ，一般用类名，如：a标签
.style1 { color:#000 ;} 同时准备样式2 .style2{ color:#fff ;}
在脚本事件中为a绑定点击事件：var a = document.getElementById("a");
a.onclick= function (){a.className = "style2"; }

网友（4）：

    
    
    
    
锚链接    
    
*{ 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;}    
    
    
    
    
    
	    
   	这是第一个
    
       这是第二个
    
       这是第三个
    
       这是第四个
    
       这是第五个
    
       这是第六个

这是第一个

这是第二个

这是第三个

这是第四个

这是第五个

这是第六个

$("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);
})