2. 技术
  3. jQuery--tabs效果

jQuery--tabs效果

小菜鸟战斗机 2018-3-28 209 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<BR>&lt;html
 xmlns="
http://www.w3.org/1999/xhtml"&gt;<BR>&lt;head&gt;<BR>&lt;meta
 http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;<BR>&lt;title&gt;tabs&lt;/title&gt;<BR>&lt;/head&gt;<BR>&lt;script src="js/jquery-1.5.1.min.js"&gt;&lt;/script&gt;<BR>&lt;script type="text/javascript" language="javascript"&gt;<BR>$(function(){<BR>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<BR>&nbsp;&nbsp; &nbsp;$(".tabs ul li").mouseover(function(){<BR>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<BR>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(".tabs ul li.current").removeClass("current");//删除li的current类<BR>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(this).addClass("current");&nbsp; //给当前li增加类；<BR>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var index=$(this).index();//获取li的索引号<BR>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(".tabs div.current").removeClass("current");//删除div的current类<BR>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(".tabs div").eq(index).addClass("current");&nbsp;&nbsp; &nbsp; //&nbsp;&nbsp; &nbsp;获取li跟div对应的索引号，并且给div添加类&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<BR>&nbsp;&nbsp; &nbsp;});&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<BR>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<BR>});<BR><BR><BR>&lt;/script&gt;<BR>&lt;style type="text/css"&gt;<BR>.tabs{<BR>&nbsp;&nbsp; &nbsp;width:400px;<BR>&nbsp;&nbsp; &nbsp;height:300px;<BR>&nbsp;&nbsp; &nbsp;border:1px solid #000;<BR>}<BR>.tabs ul {<BR>&nbsp;&nbsp; &nbsp;width:400;<BR>&nbsp;&nbsp; &nbsp;padding:0;<BR>&nbsp;&nbsp; &nbsp;margin:0;<BR>}<BR>.tabs ul li{<BR>&nbsp;&nbsp; &nbsp;width:100px;<BR>&nbsp;&nbsp; &nbsp;height:20px;<BR>&nbsp;&nbsp; &nbsp;padding:5px 0;<BR>&nbsp;&nbsp; &nbsp;list-style-type:none;<BR>&nbsp;&nbsp; &nbsp;text-align:center;<BR>&nbsp;&nbsp; &nbsp;float:left;<BR>&nbsp;&nbsp; &nbsp;background:#09F;<BR>}<BR>.tabs ul li.current{<BR>&nbsp;&nbsp; &nbsp;width:100px;<BR>&nbsp;&nbsp; &nbsp;height:20px;<BR>&nbsp;&nbsp; &nbsp;padding:5px 0;<BR>&nbsp;&nbsp; &nbsp;list-style-type:none;<BR>&nbsp;&nbsp; &nbsp;text-align:center;<BR>&nbsp;&nbsp; &nbsp;float:left;<BR>&nbsp;&nbsp; &nbsp;background:#fff;<BR>}<BR>.tabs div{<BR>&nbsp;&nbsp; &nbsp;clear:both;<BR>&nbsp;&nbsp; &nbsp;width:100%;<BR>&nbsp;&nbsp; &nbsp;height:270x;<BR>&nbsp;&nbsp; &nbsp;display:none;<BR>}<BR>.tabs div.current{<BR>&nbsp;&nbsp; &nbsp;clear:both;<BR>&nbsp;&nbsp; &nbsp;width:100%;<BR>&nbsp;&nbsp; &nbsp;height:270px;<BR>&nbsp;&nbsp; &nbsp;display:block;<BR>}<BR><BR>&lt;/style&gt;<BR>&lt;body&gt;<BR><BR>&lt;div class="tabs"&gt;<BR>&nbsp;&nbsp; &nbsp;&lt;ul&gt;<BR>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li class="current"&gt;1&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;2&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;3&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;4&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<BR>&nbsp;&nbsp; &nbsp;&lt;div class="current"&gt;11&lt;/div&gt;<BR>&nbsp;&nbsp;&nbsp; &lt;div&gt;22&lt;/div&gt;<BR>&nbsp;&nbsp;&nbsp; &lt;div&gt;33&lt;/div&gt;<BR>&nbsp;&nbsp;&nbsp; &lt;div&gt;44&lt;/div&gt;<BR>&lt;/div&gt;<BR><BR>&lt;/body&gt;<BR>&lt;/html&gt;<BR><BR>


最新回复 (0)
返回