本文介绍了一个使用CSS实现元素布局的方法，通过鼠标悬停效果切换不同区块的显示状态，实现了动态的内容展示。
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
ul {padding:0; margin:0; list-style:none; overflow:hidden;}
li {width:200px; height:50px; border:1px black solid; float:left;}
.outer {width:604px; height:300px; border:1px red solid; margin-top:20px;}
.inner {width:604px; height:300px; overflow:hidden; text-align:center; line-height:300px; font-size:100px; font-weight:bold; display:none;}
.block {display:block;}
.red {background:red;}
</style>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="outer">
<div class="inner block">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
<script type="text/javascript">
<!--
var inners = $('.outer div');
var buts = $('li');
buts.mouseover(function(){
inners.removeClass('block'); //这俩行才是管用的
$(inners[buts.index(this)]).addClass('block');
});
//-->
</script>
</html>
转载于:https://www.cnblogs.com/GeekHacker/archive/2012/06/25/2562079.html
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
