码迷,mamicode.com
首页 > 移动开发 > 详细

Tab/Disappear

时间:2015-04-23 12:39:01      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <script type="text/javascript" src="http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js"></script>

 </head>

<style>

*{margin:0px; padding:0px;border:0px;}

li{list-style:none; float:left; margin:0px 5px;}

body{padding:20px;}

.mrt{ PADDING:20PX; BORDER:10pX SOLID #666} 

</style>

 <body>

 <ul style=‘height:30px;‘>

  <li style="width:300px; background:#333; color:white; font-weight:bold; text-align:center; height:30px; line-height:30px;">啊时代发生地方</li>

  <li style="width:300px; background:#333; color:white; font-weight:bold; text-align:center; height:30px; line-height:30px;">啊时代发生地方</li>

  <li style="width:300px; background:#333; color:white; font-weight:bold; text-align:center; height:30px; line-height:30px;">啊时代发生地方</li>

 </ul>

  <div onMouseOver="showList(‘mrtksbox‘,1);" onMouseOut="showList(‘mrtksbox‘,0);"  id="mrtksbox" class="mrt" style="display:none">11111<BR>AASDF<BR>AASDASDASDASDF<BR></div>

  <div class="mrt" style="display:none">222222222222F<BR>AASDF<BR>AASDASDASDASDF<BR></div>

  <div class="mrt" style="display:none">33333333<BR>AASDF<BR>AASDASDASDASDF<BR></div>

<script>

$(‘ul li‘).each(function(i) {       

$(this).mouseover(function(){ 

$(‘.mrt‘).css(‘display‘,‘none‘); 

$(‘.mrt:eq(‘+i+‘)‘).css(‘display‘,‘block‘);   

$(‘.mrt:eq(‘+i+‘)‘).mouseover(function(){

$(‘.mrt:eq(‘+i+‘)‘).css(‘display‘,‘block‘);

});

});

}); 

$(‘ul li‘).mouseout(function(){

$(‘.mrt‘).css(‘display‘,‘none‘);

});

$(‘.mrt‘).mouseout(function(){

$(‘.mrt‘).css(‘display‘,‘none‘);

}); 

/* 标签内要添加  onMouseOver="showList(‘mrtksbox‘,1);" onMouseOut="showList(‘mrtksbox‘,0);"

function showList(e, t) {

    t == 1 ?

(document.getElementById(e).style.display = "block", document.getElementById("mrt02").style.background = "url(images/mrtsyfx2.jpg) right no-repeat")

(document.getElementById(e).style.display = "none", document.getElementById("mrt02").style.background = "url(images/mrtsyfx.jpg) right no-repeat")

}

*/

</script>

 </body>

</html>

Tab/Disappear

标签:

原文地址:http://www.cnblogs.com/mrt-yyy/p/4449914.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!