JS-Methode zur Realisierung der Tab-Verknüpfung zwischen horizontalen und vertikalen Tabs_Javascript-Fähigkeiten-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

JS-Methode zur Realisierung der Tab-Verknüpfung zwischen horizontalen und vertikalen Tabs_Javascript-Fähigkeiten

May 16, 2016 pm 03:37 PM

js tab 横向联动选项卡

Das Beispiel in diesem Artikel beschreibt die Methode zur Realisierung der Tab-Verknüpfung zwischen horizontalen und vertikalen Tabs mithilfe von JS. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist eine horizontale und vertikale Verknüpfungsregisterkarte. Der Inhalt der Karte ist derselbe, es gibt jedoch eine zusätzliche Bedienmethode. Wenn Sie auf eine Registerkarte klicken, wird auch die entsprechende Option angezeigt Das heißt, die Funktionen beider sind gleich, was eine sehr clevere Layoutmethode ist.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-hx-sx-tab-ld-demo/

Der spezifische Code lautet wie folgt:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;选项卡Tab联动&lt;/title&gt;
&lt;style type="text/css"&gt;
body{text-align:center;margin:0;padding:0;font-size:12px;}
div,form,img,ul,ol,li,dl,dt,dd{margin:0;padding:0;border:0;}
h1,h2,h3,h4,h5,h6,p,table,td{margin:0;padding:0;font-size:12px;}
li{list-style:none;}
#layout{width:500px;margin:10px auto;}
#tabnav{width:80px;float:left;}
#tabnav li{float:left;width:70px;height:23px;line-height:23px;cursor:pointer;border:1px solid #ccc;margin:2px 0 0 0;display:inline;color:#333;}
#tabnav li.current{color:#f60;font-weight:bold;}
#tab{width:400px;height:235px;float:right;}
#tab ul{width:400px;height:24px;}
#tab li{float:left;width:70px;height:23px;line-height:23px;cursor:pointer;border:1px solid #ccc;margin:0 1px 0 0;display:inline;background:#333;color:#fff;}
#tab li.current{background:#f60;font-weight:bold;}
#tab .tabcon{float:left;width:398px;height:208px;display:none;border:1px solid #ccc;}
#tab .block{display:block;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="layout"&gt;
 &lt;ul id="tabnav"&gt;
  &lt;li onclick="go_to(1);" class="current"&gt;最新精华帖&lt;/li&gt;
  &lt;li onclick="go_to(2);"&gt;最新帖子&lt;/li&gt;
  &lt;li onclick="go_to(3);"&gt;最旧帖子&lt;/li&gt;
  &lt;li onclick="go_to(4);"&gt;新最帖子&lt;/li&gt;
  &lt;li onclick="go_to(5);"&gt;旧最帖子&lt;/li&gt;
 &lt;/ul&gt;
 &lt;div id="tab"&gt;
  &lt;ul id="tabnav02"&gt;
   &lt;li onclick="go_to(1);" class="current"&gt;最新精华帖&lt;/li&gt;
   &lt;li onclick="go_to(2);"&gt;最新帖子&lt;/li&gt;
   &lt;li onclick="go_to(3);"&gt;最旧帖子&lt;/li&gt;
   &lt;li onclick="go_to(4);"&gt;新最帖子&lt;/li&gt;
   &lt;li onclick="go_to(5);"&gt;旧最帖子&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="tabcon_1" class="tabcon block"&gt;
   1
  &lt;/div&gt; 
  &lt;div id="tabcon_2" class="tabcon"&gt;
   2
  &lt;/div&gt; 
  &lt;div id="tabcon_3" class="tabcon"&gt;
   3
  &lt;/div&gt; 
  &lt;div id="tabcon_4" class="tabcon"&gt;
   4
  &lt;/div&gt; 
  &lt;div id="tabcon_5" class="tabcon"&gt;
   5
  &lt;/div&gt;  
  &lt;script type="text/javascript"&gt;
  &lt;!--
  var h=document.getElementById("tabnav").getElementsByTagName("li");
  var d=document.getElementById("tabnav02").getElementsByTagName("li");
  function go_to(s){
   for(var i=1;i&lt;=h.length;i++){
    if(s==i){
    h[i-1].className="current";
    d[i-1].className="current";
    document.getElementById("tabcon_"+i).className="tabcon block";
    }
    else{
    h[i-1].className="";
    d[i-1].className="";
    document.getElementById("tabcon_"+i).className="tabcon";
    }
   }
  }
  //--&gt;
  &lt;/script&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

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

Erklärung dieser Website

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