网页Tab切换
body部分
<div id="d2">
<ul class="c2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="d3">
<ol>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</div>
style部分
*{
list-style-type: none;
padding: 0;
margin: auto;
}
#d2{
margin-left:50px ;
float: left;
width: 300px;
height: 400px;
background: darkgray;
}
#d2 li{
height: 100px;
}
#d3 ol li{
float: left;
width: 500px;
height: 400px;
background: darkcyan;
display: none;
}
script部分
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#d2 ul:first li").mouseover(function(){
$("#d3 ol:first li").hide();
var index=$("#d2 ul:first li").index(this);
var i=$("#d3 ol:first li:eq("+index+")").show();
});
})
</script>