탭을 만드는 html+css+jquery-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

탭을 만드는 html+css+jquery

Feb 09, 2018 am 09:27 AM

css

이번에는 탭을 만드는 html+css+jquery를 가져오겠습니다. html+css+jquery를 사용하여 탭을 만드는 notes는 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 
&lt;head&gt; 
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 
&lt;title&gt;列表选项卡&lt;/title&gt; 
&lt;style type=&quot;text/css&quot;&gt; 
body{ 
margin:0px; 
padding:0px; 
} 
#main{ 
width:310px; 
border:1px solid #C8C8CC; 
margin-left:auto; 
margin-right
:auto; 
margin-top:50px; 
} 
.main_title{ 
width:310px; 
border-bottom:1px solid #C8C8CC; 
height:30px; 
} 
#main div .chang{ 
border:1px solid #C8C8CC; 
float:left; 
width:153px; 
height:26px; 
text-align:center; 
padding-top
:4px; 
cursor:pointer; 
} 
.main_head{ 
width:310px; 
height:25px; 
background-color
:#FFF4F8; 
} 
.main_head font{ 
font-size:13px; 
color:#808080; 
margin-top:5px; 
} 
.main_content{ 
width:310px; 
border-top:1px solid #808080; 
} 
.main_content ul{ 
margin-left:-30px; 
margin-top:5px; 
width:290px; 
} 
.main_content ul li{ 
list-style-type
:none; 
font-size:13px; 
color:#2464B2; 
border-bottom:1px dotted #808080; 
line-height:27px; 
} 
.main_content ul li a{ 
font-size:13px; 
color:#2464B2; 
text-decoration
:none; 
} 
.main_content ul li a:hover{ 
text-decoration:underline; 
} 
#main div ul.main_content_chang{ 
width:290px; 
position:relative; 
z-index:100; 
top:0px; 
left:0px; 
display:block; 
} 
#main div ul{ 
position:relative; 
display:none; 
} 
&lt;/style&gt; 
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; 
&lt;script type=&quot;text/javascript&quot;&gt; 
$(function(){ 
$(&quot;.chang&quot;).each(function(index){ 
$(this).click(function(){ 
$(this).css(&quot;background-color&quot;,&quot;#E02D29&quot;); 
$(this).siblings(&quot;div&quot;).css(&quot;background-color&quot;,&quot;#fff&quot;); 
$(&quot;#main div ul&quot;).removeClass(&quot;main_content_chang&quot;); 
$(&quot;.main_content ul:eq(&quot;+index+&quot;)&quot;).show().siblings(&quot;ul&quot;).hide(); 
}) 
}) 
}) 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;div id=&quot;main&quot;&gt; 
&lt;div class=&quot;main_title&quot;&gt; 
&lt;div class=&quot;chang&quot; style=&quot;background:#E02D29&quot;&gt;实时热点&lt;/div&gt; 
&lt;div class=&quot;chang&quot; style=&quot;float:right;&quot;&gt;七日关注&lt;/div&gt; 
&lt;/div&gt; 
&lt;div class=&quot;main_content&quot;&gt; 
&lt;!-----------实时热点--------------&gt; 
&lt;ul class=&quot;main_content_chang&quot;&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_1.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;来自星星你的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_2.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;私人定制的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/3_1.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;全能星战的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_4.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;加多宝陪千万的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_5.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;女生厕所产子之后上课的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_6.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;圆通夺命快递始末的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_7.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;翻版张柏芝的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_8.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;李彦鹏说谎的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_9.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;1.7亿元存折的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_10.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;90后为讨好男友溺死亲生女的&lt;/a&gt;&lt;/li&gt; 
&lt;li style=&quot;text-align:right; border-bottom-style:none&quot;&gt;&lt;a href=&quot;#&quot; style=&quot;font-size:15px&quot;&gt;查看完整榜单&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt; 
&lt;!-----------七日关注--------------------&gt; 
&lt;ul&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_1.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;南京出土神秘宝剑的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_2.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;民政局*的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/3_1.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;沃尔玛道歉的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_4.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;买发卡的女孩的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_5.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;假茅台骗两亿贷款的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_6.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;男子收到亡妻圣诞大礼的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_7.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;全球最美的100的&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_8.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;陨石八千万&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_9.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;安培参拜靖国神社&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;img src=&quot;img/1_10.jpg&quot;/&gt; &lt;a href=&quot;#&quot;&gt;春晚舞台曝光&lt;/a&gt;&lt;/li&gt; 
&lt;li style=&quot;text-align:right; border-bottom-style:none&quot;&gt;&lt;a href=&quot;#&quot; style=&quot;font-size:15px&quot;&gt;查看完整榜单&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt; 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;/body&gt; 
&lt;/html&gt;

로그인 후 복사

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!