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

最新推荐文章于 2021-03-31 14:33:15 发布

阿聪世家

最新推荐文章于 2021-03-31 14:33:15 发布

阅读量1.7k

点赞数 1

分类专栏：网站常用jquery效果文章标签：滑动门 jQuery 常用

本文链接：https://blog.csdn.net/congcong875/article/details/8660269

版权

网站常用jquery效果专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!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>

阿聪世家

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
常用的滑动门效果，简洁明了，方便使用，前端必用!

常用的滑动门，简洁明了方便使用* { 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; backgro
复制链接

扫一扫

专栏目录