jQuery实现类似滑动门切换效果的层切换

前端技术 2023/09/01 JavaScript
复制代码 代码如下:

<!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>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>滑动门切换，jQuery层切换代码</title>
<script type=\"text/javascript\" src=\"http://www.phpstudy.net/ajaxjs/jquery-1.6.2.min.js\"></script>
<script type=\"text/javascript\">
$(function(){
$(\"ul li\").each(function(i){
$(this).hover(function(){
$(this).addClass(\"bg\").siblings().removeClass(\"bg\");
$(\".div:eq(\"+i+\")\").show().siblings(\".div\").hide();
})
})
})
</script>
<style type=\"text/css\">
*{ margin:0; padding:0; font-size:12px;}
ul li{ list-style:none; float:left; background-color:#999; cursor:pointer; width:100px; height:25px; line-height:25px; text-align:center;}
ul li.bg{ background-color:#9F0;}
.clr{ clear:both;}
.div{width:200px; height:60px; background:#666; line-height:60px; text-align:center;}
.none{ display:none}
</style>
</head>
<body>
<ul><li class=\"bg\">账户信息</li><li>邮寄地址</li></ul>
<div class=\"clr\"></div>
<div class=\"div\">
第一个div内容
</div>
<div class=\"div none\">
第二个div内容
</div>
</body>
</html>

本文地址：https://www.stayed.cn/item/2897

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案