胖蒜

分享有价值的资源

JQuery 实现鼠标点击选中效果

今天想着给我的Typecho社区主题加一点效果,我的需要的是这样的,一系列标签链接,鼠标点中哪个,哪个就改变效果,选择另外一个,之前的效果就恢复默认的。

直接上代码吧:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
ul{ list-style:none}
ul li{ display:block; width:100px; height:28px;}
.default{
    baicolor: #000;
    border:1px solid #999;
 
}
.checked{
    color:#f00;
    border:1px solid #ff0;
     
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<script>
$(function(){
    $("li").each(function(){
        $(this).click(function(){
            $("li").addClass("default").removeClass("checked");
            $(this).addClass("checked").removeClass("default");
        })
     
    });
 
})
</script>
</head>
<body>
<ul>
<li class="default">这是第一个</li>
<li class="default">这是第二个</li>
<li class="default">这是第三个</li>
<li class="default">这是第四个</li>
</ul>
</body>
</html>

这样就实现了选择的改变了样式,突出显示出来,换另外一个选中,之前的样式恢复默认,新选中的改变样式。

感觉很棒,欢迎点赞 OR 打赏~

分享到:

评论 (1)

立即登录评论
可联系QQ744272645咨询

    你好

    肖文彬
马上咨询 自媒体号