您的位置：首页 > Web前端

常用的滑动门效果，简洁明了，方便使用，前端必用!

2013-03-11 09:38 183 查看

<!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=gb2312" />
<title>常用的滑动门，简洁明了方便使用</title>
<style type="text/css">
* { padding:0; margin:0;}
body { font-size:12px; padding:100px;}
ul { list-style-type:none;}
.box ul { height:30px; line-height:30px;}
.box ul li { float:left; padding:0 10px; background:#ccc;  border:1px solid #A1AFB9; border-bottom:none; position:relative;   cursor:pointer;  margin-right:5px; }
.box ul li.two { background:red;}
.content { width:325px; border:1px solid #A1AFB9; padding:10px; height:100px;}
* html .content { margin-top:-1px;}
.box ul li.one { background:#fff;}
</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".ct:gt(0)").hide();//当前第一个显示 第二个第三个隐藏
var congcong = $(".box ul li")
congcong.hover(function(){
$(this).addClass("two")
.siblings().removeClass("two");//添加hover效果
});
congcong.click(function(){
$(this).addClass("one")
.siblings().removeClass(); //添加点击的效果，当然也可以直接改成hover切换
var congcong_index = $(".box ul li").index(this);
$(".ct").eq(congcong_index).show()//滑动菜单对应当前内容
.siblings().hide();
})
})

</script>
</head>
<body>
<div class="box">
<ul>
<li class="one">网站介绍</li>
<li>报名流程</li>
<li>常见问题</li>
</ul>
<div class="content">
<div class="ct">随着移动互联网的兴起，互联网行业正向更加智能化的Web3.0时代迈进，中国互联网行业进入了高速发展的势态，jquery已经为大部分企业广泛应用和重视,优势明显，未来发展空间巨大，IT行业急需前端开发人才。 </div>
<div class="ct">这里有jquery技能.让学员自己能开发一个完整的框架产品,从深层次上掌握前端的应用,这是后盾独有的。 </div>
<div class="ct">875 </div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 滑动门 jQuery 常用

相关文章推荐

新的分享

章节导航