标签:img center nbsp query jquery class this osi addclass
作为网页的基本常见特效,我今天趁着中午下班,赶紧试一下,没想到简单的实现了,
不过本来就是入门级的东西,就当打怪升级吧!
效果如图:
html:
<ul class="nav"> <li class="on">选项卡1</li> <li>选项卡2</li> <li>选项卡3</li> <li>选项卡4</li> </ul> <ul class="con"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
css:
ul,li{ margin: 0; padding: 0; } li{ float: left; list-style: none; text-align: center; } .nav{ width: 400px; height: 50px; } .nav li{ width: 100px; height: 50px; line-height: 50px; } .on{ background-color:red; } .con{ width: 400px; height: 300px; border: 1px solid black; position: relative; } .con li{ width: 400px; height: 300px; line-height: 300px; font-size: 50px; position: absolute; /**************不写left和top值默认为0***************/ display: none; } .con li.active{ display: block; }
jquery:
$(function(){ $(".nav li").mouseover(function(){ $(this).addClass("on").siblings().removeClass("on"); var index= $(this).index(); $(".con li").eq(index).addClass("active").siblings().removeClass("active"); }) })
标签:img center nbsp query jquery class this osi addclass
原文地址:http://www.cnblogs.com/lw1995/p/6664739.html