JQuery TAB切换

<!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 TAB切换</title>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
 $(document).ready(
  function(){
   $("li").mousemove(function(){
    $("li").css("background-color","#FFFFFF");
    $(this).css("background-color","#FF9900");
    var id = $(this).attr("title");
    $("div > dl").hide();
    $("#"+id).show(); /*字符串用+号连接 整个流程都很简单*/
   })
  }
 )
</script>
<style type="text/css">
 ul{
 margin-bottom:0px;
 margin-left:0px;
 border:#FF9900 solid 1px;
 height:30px;
 width:200px;}
 li{
 float:left;
 margin-left:5px;
 margin-top:6px;
 list-style:none;
 border-right:solid 1px #FF9900;
 padding-right:4px;}
 dl{
 margin-top:5px;
 border:solid #FF9900 1px;
 width:200px;
 height:150px;}
</style>
</head>

<body style="text-align:center">
<div class="yy">
<ul>
<li title="a1">123123</li>
<li title="a2">456456</li>
<li title="a3" style="background-color:#FF9900;">789789</li>
</ul>
<dl id="a1" style="display:none;">123123</dl>
<dl id="a2" style="display:none;">456456</dl>
<dl id="a3">789789</dl>
</div>
</body>
</html>

posted @ 2012-03-15 10:24  stma  阅读(1097)  评论(0)    收藏  举报