常用的滑动门效果，简洁明了，方便使用，前端必用!
<!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>