<!doctype html>
<!--<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。-->
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link rel="stylesheet" href="" /><!--引入的css页面的样式 href是引入的css样式路径-->
<!--当前页面的三要素-->
<title>选项卡</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0}/*去掉所有浏览器给标签默认边距*/
body{font-family:"微软雅黑";font-size:14px;}
a{text-decoration:none;}ul li{list-style-type:none;}/*去掉默然样式*/
.wfcontent{750px;height:450px;border:1px solid red;margin:100px auto;background:#DBDBDB}
/*title start*/
.wfcontent .wftitle{750px;height:40px;border-bottom:1px solid #999;position:relative;}
.wfcontent .wftitle ul li{float:left;}
.wfcontent .wftitle ul li a{color:#181818;height:40px;80px;line-height:40px;text-align:center;font-weight:700;display:block;}
/*.wfcontent .wftitle ul li a:hover{color:#007EC3;border-bottom:3px solid #007EC3;}*/
.wfcontent .wftitle .wfline{
80px;height:3px;position:absolute;top:40px;left:0;background:#007EC3;
}.wfcontent .wftitle ul li .fontcolor{color:#007EC3}
/*title end*/
.wfcontent .wfcon{732px;height:390px;display:none;padding-top:15px;padding-left:10px}
.wfcontent .wfcon dl{221px;height:160px;padding:10px;float:left;}
.wfcontent .wfcon .wfhover:hover{box-shadow:0 0 10px #0F6;background:#fff;}
.wfcontent .wfcon dl dt{220px;height:124px;}
.wfcontent .wfcon dl dd a{color:#111;}
.wfcontent .wfcon dl dd a:hover{color:#C00;}
.wfcontent .wfcon dl dd span a{color:#9F0;}
.wfcontent .wfcon dl dd i{1px;height:10px;display:inline-block;
background:#111;margin:0 10px;
}
.wfcontent .wfcon dl dd .bc:hover{color:#FF0;}
</style>
</head>
<body>
<div class="wfcontent">
<!--选项卡开始-->
<div class="wftitle" id="wftitle">
<ul>
<li><a href="#" class="fontcolor">推荐</a></li>
<li><a href="#">编程开发</a></li>
<li><a href="#">工具软件</a></li>
</ul>
<p class="wfline"></p>
</div>
<!--选项卡结束-->
<div class="wfcon wfcont_tj" style="display:block;">
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
</div>
<div class="wfcon wfcont_tj">
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
</div>
<div class="wfcon wfcont_tj">
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
<dl class="wfhover">
<dt><a href="#"><img src="1.jpg"width="220px" height="124px"></a></dt>
<dd><a href="#">新手要多些</a></dd>
<dd><span><a href="#">免费</a></span><i></i><a href="#" class="bc">回复第三方</a></dd>
</dl>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><!--引入的js src是引入的js样式路径-->
<script type="text/javascript">
$("#wftitle ul li").hover(function(){
var _left =$(this).position().left;
$("p.wfline").stop();
$("p.wfline").animate({left:_left},500);
var _index = $(this).index();//获取序列好
$(".wfcon").eq(_index).show().siblings(".wfcon").hide();
$(this).find("a").addClass("fontcolor").parent().siblings().find("a").removeClass("fontcolor");
});
</script>
</body>
</html>
注意：使用的时候引入jquery