suchen

Heim >Web-Frontend >js-Tutorial >js-Code, um den Effekt der Tab-Schiebetür auf der linken Seite zu realisieren_Javascript-Fähigkeiten

js-Code, um den Effekt der Tab-Schiebetür auf der linken Seite zu realisieren_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:40:381183Durchsuche

Das Beispiel in diesem Artikel beschreibt den JS-Code zum Implementieren des Tab-Schiebetüreffekts auf der linken Webseite. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist eine Web-Schiebetür mit linker Öffnung, Web-Schiebetür, TAB-Schiebetür, vertikales Schiebetürmenü, vertikale TAB-Registerkarte, kompatibel mit den Browsern IE6/IE7/FF/Opera. Tatsächlich sind die Codes für das vertikale und horizontale Layout grundsätzlich gleich, mit nur geringfügigen Änderungen. Solange Sie eine Art Schiebetür lernen, können Sie das gleiche Problem wiederholen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-left-tab-cha-style-codes/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖排的选项卡</title>
<meta name="keywords" content="" />
<style type="text/css">
body{font-size:12px;font-family:"Lucida Grande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:#256bae;}
.warp{width:586px; height:269px !important; height:271px;border:1px solid #dbdcd7;}
.main{width:562px; height:269px !important;height:271px;padding:5px; margin-left:15px;overflow:hidden;float:left;}
.news{position:absolute;z-index:4;width:24px;}
.news ul{list-style:none;padding:0;margin:0;}
.news ul li{ height:84px !important;height:88px;width:20px;margin-bottom:0px;padding-top:5px;text-align:center;cursor:pointer;;vertical-align:middle; background-color:#e5e5e5; border-right:#dbdcd7 solid 1px;border-bottom:#dbdcd7 solid 1px;}
.news ul li.on{background-color:#ffffff; border:#FFFFFF 0px}
.news span{display:block; margin-top:9px !important; margin-top:20px;}
.dis{display:block;}
.undis{display:none;}
</style>
 <script type="text/javascript">
 function g(o){return document.getElementById(o);}
 function HoverLi(m,n,counter){for(var i=1;i<=counter;i++){g('tb_'+m+i).className='';g('tbc_'+m+i).className='undis';}g('tbc_'+m+n).className='dis';g('tb_'+m+n).className='on';}
 </script>
</head>
<body>
<strong>兼容IE6/IE7/FF/opera</strong><br><br>
<div class="warp">
 <div class="news">
  <ul>
   <li class="on" id="tb_11" onmouseover="HoverLi(1,1,3);"><span>企业新闻</span></li>
   <li class="" id="tb_12" onmouseover="HoverLi(1,2,3);"><span>业内咨讯</span></li>
  <li class="" id="tb_13" onmouseover="HoverLi(1,3,3);"><span>业内咨讯</span></li>
  </ul>
 </div>
<div class="dis" id="tbc_11">
  <div class="main">
  1<br>企业新闻的内容1<br>企业新闻的内容1<br>企业新闻的内容1
 </div>
 </div>
 <div class="undis" id="tbc_12">
  <div class="main">
  2<br>业内咨讯的内容2<br>业内咨讯的内容2<br>业内咨讯的内容2<br>
  </div>
 </div>
  <div class="undis" id="tbc_13">
  <div class="main">
  3<br>业内咨讯的内容3<br>业内咨讯的内容3<br>业内咨讯的内容3<br>
  </div>
 </div>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Erstellen Sie einen kostenlosen WEB-Videoplayer basierend auf Flowplayer mit Quellcode-Javascript-KenntnissenNächster Artikel：Erstellen Sie einen kostenlosen WEB-Videoplayer basierend auf Flowplayer mit Quellcode-Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen