JavaScriptはTabタブの切り替えを実現します。

2763 ワード

js。タb を選択します

ここの例では、jsのタブ切り替えを実現するための具体的なコードを共有します。参考にしてください。具体的な内容は以下の通りです。
原生jsのdom操作ができます。

html


<body>
 <div id="tab">
 <div id="tab_header">
  <ul>
  <li class="seclect">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  </ul>
 </div>
 <div id="tab_body">
  <div class="dom" style="display: block;">
  <ul>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li>2</li>
   <li>2</li>
   <li>2</li>
   <li>2</li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li>3</li>
   <li>3</li>
   <li>3</li>
   <li>3</li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li>4</li>
   <li>4</li>
   <li>4</li>
   <li>4</li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li>5</li>
   <li>5</li>
   <li>5</li>
   <li>5</li>
  </ul>
  </div>
 </div>
</div>

cssはやめます
js。


window.onload = function(){
 var allLis = $('tab_header').getElementsByTagName('li');
 var allDoms = $('tab_body').getElementsByClassName('dom');
 console.log(allLis,allDoms);
 //      allLis
 for(var i =0; i<allLis.length;i++){
 var li = allLis[i];
 li.index = i; 
 li.onmouseover = function(){
  //          class  
  for(var j = 0;j<allLis.length;j++){
  allLis[j].className = '';
  allDoms[j].style.display='none';
  }
  this.className = 'seclect';
  allDoms[this.index].style.display='block';
 }
 }
}
function $(id){
 return typeof id === "string" ? document.getElementById(id) : null;
}

この中のfunctionドル（id）は私が包装したdom idセレクタです。その中で先に準備操作のイベントソースを手に入れて、持ってきた配列を通して、onmouseoverマウスを移動した時に、再び配列を巡回して、配列内のすべてのclassinameを空にして、displayスタイルを隠して、どれに移動したらいいですか？
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

vueベースのtab-listカテゴリは、商品リストコンポーネントのコード例を切り替えます。

静かにバッチ処理のvbsスクリプトを実行します。