jsはシンプルな切り替え可能なタブを実装しますeffect_javascriptスキル-jsチュートリアル-php.cn

jsはシンプルな切り替え可能なタブを実装しますeffect_javascriptスキル

WBOY

リリース： 2016-05-16 16:04:55

オリジナル

1339 人が閲覧しました

この記事の例では、単純な切り替え可能なタブ効果を js で実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

写真に示すように、最も単純な純粋なタブ

最初のステップは、もちろん HTML コードと CSS スタイルを記述することです

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px;
line-height:24px; margin:0 4px; text-align:center;
border:1px solid #ccc; border-bottom:none;
background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px;
margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc;
border-top:none; padding:20px;}
</style>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

ログイン後にコピー

2 番目のステップは、単純な切り替え効果を実現することです

ポイント 1:

abc.document.getElementsByTagName("li")

ログイン後にコピー

abc の下にあるラベル li を持つすべての要素を取得します。返されるのは、配列のいくつかの属性を持つ要素のコレクションです。

ポイント 2: ループ。最初のループで onclick イベントを li に追加し、次に onlink イベントがクリックされたときに再度ループして、すべてのタブのアクトスタイルを削除し、すべてのコンテンツを非表示にします。次に、クリックしたオプションと対応するコンテンツを表示します。
ポイント3:

tab_t_li[i].index = i;

ログイン後にコピー

ループする場合、タブに追加の属性を追加し、タブとコンテンツに一致する値を割り当てます。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{
height:25px;
border-bottom:1px solid #ccc;
}
#tab_t li{
float:left;
width:80px;
height:24px;
line-height:24px;
margin:0 4px;
text-align:center;
border:1px solid #ccc;
border-bottom:none;
background:#f5f5f5;
cursor:pointer
}
#tab_t .act{
position:relative;
height:25px;
margin-bottom:-1px;
background:#fff;
}
#tab_c{
border:1px solid #ccc;
border-top:none;
padding:20px;
}
</style>
<script>
window.onload = function(){
 var tab_t = document.getElementById("tab_t");
 var tab_t_li = tab_t.getElementsByTagName("li");
 var tab_c = document.getElementById("tab_c");
 var tab_c_li = tab_c.getElementsByTagName("div");
 var len = tab_t_li.length;
 var i=0;
 for(i=0; i<len; i++){
  tab_t_li[i].index = i;
  tab_t_li[i].onclick = function(){
   for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
   }
   tab_t_li[this.index].className = 'act';
   tab_c_li[this.index].className = '';
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

ログイン後にコピー

3 番目のステップは、関数として記述することです。上記の書き方では、1ページに1つのタブしか使用できません。さらに追加する場合は、コピーを作成して多くの変数名を変更する必要があります。

ポイント: tab_t_li[i][evt] 値は文字列として渡されるため、直接記述すると tab_t_li[i] となりますが、このように「onclick」は実行できませんが、tab_t_li[" となります。 onclick"] はこのように実行されますか? 質問です。

これで、関数

を呼び出すときに、対応する ID 名、タグ名、イベント名を記述するだけで、1 つのページに複数のスイッチを配置できるようになりました。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{
height:25px;
border-bottom:1px solid #ccc;
}
#tab_t li{
float:left;
width:80px;
height:24px;
line-height:24px;
margin:0 4px;
text-align:center;
border:1px solid #ccc;
border-bottom:none;
background:#f5f5f5;
cursor:pointer
}
#tab_t .act{
position:relative;
height:25px;
margin-bottom:-1px;
background:#fff;
}
#tab_c{
border:1px solid #ccc;
border-top:none;
padding:20px;
}
</style>
<script>
window.onload = function(){
 tab("tab_t","li","tab_c","div","onmouseover")
 function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
  var tab_t = document.getElementById(tab_t);
  var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
  var tab_c = document.getElementById(tab_c);
  var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
  var len = tab_t_li.length;
  var i=0;
  for(i=0; i<len; i++){
   tab_t_li[i].index = i;
   tab_t_li[i][evt] = function(){
    for(i=0; i<len; i++){
     tab_t_li[i].className = '';
     tab_c_li[i].className = 'hide';
    }
    tab_t_li[this.index].className = 'act';
    tab_c_li[this.index].className = '';
   }
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。