Divタブクラス内の表示/非表示

Question

2つのタブクラス内で選択されている場合、divを表示/非表示にドロップダウンしようとしています。これは、ここで最初のタブにthanks to this solution

を動作させるために管理しているHTMLです：

<div class="tab2"> 

       <select id="target" style="width:150px; margin-left:40px; height:420px"> 
        <option value="content_1">Option 1</option> 
        <option value="content_2">Option 2</option> 
       </select> 

       <div id="content_1" class="inv" style="width:252px; margin-left:-11px; height:300px"> 

        <a class="scopeTextArea-1">Content 1</a> 

       </div> 
       <div id="content_2" class="inv" style="width:252px; margin-left:-11px; height:300px"> 
        <a class="scopeTextArea-1">Content 2</a> 
       </div> 
      </div> 
      <div class="tab3"> 
       <select id="target" style="width:150px; margin-left:40px; height:420px"> 
        <option value="content2_1">Content 3</option> 
        <option value="content2_2">Content 4</option> 
       </select> 

       <div id="content2_1" class="inv" style="width:252px; margin-left:-11px; height:300px"> 
        <a class="scopeTextArea-1">Content 3</a> 

       </div> 
       <div id="content2_2" class="inv" style="width:252px; margin-left:-11px; height:300px"> 
        <a class="scopeTextArea-1">Content 4</a> 
       </div> 


      </div> 

、ここでは、jQueryのは、前の回答の通りです：

window.onload = function() { 
document 
    .getElementById('target') 
    .addEventListener('change', function() { 
     'use strict'; 
     var vis = document.querySelector('.vis'), 
      target = document.getElementById(this.value); 
     if (vis !== null) { 
      vis.className = 'inv'; 
     } 
     if (target !== null) { 
      target.className = 'vis'; 
     } 
    }); 

// send change event to element to select the first div... 
var event = new Event('change'); 
document.getElementById('target').dispatchEvent(event); 

}

どれでも明るいアイデア...これはまっすぐ進む（またはしない）場合は申し訳ありません。私はこのビジネスには新しく、個人的なプロジェクトに取り組んでいます。

私が得ることができるすべての援助に感謝します。

はここにいくつかのスクリーンショットです：Tab 3

Answer 1

Tab 2が見添付スニペットを持っています。あなたはいくつかの要素のために同じid（target）を使用することはできません

$(function() { 
 
    $("#tabs").tabs(); 
 
    }); 
 

 
window.onload = function() { 
 
document.getElementById('target').addEventListener('change', function() { 
 
     'use strict'; 
 
     var vis = document.querySelector('.vis'), 
 
      target = document.getElementById(this.value); 
 
    
 
    var e = document.getElementById("target"); 
 
    var selec = e.options[e.selectedIndex].text; 
 
      if (vis !== null) { 
 
      vis.className = 'inv'; 
 
     } 
 
     if (target !== null) { 
 
      target.className = 'vis'; 
 
     } 
 
    }); 
 
    
 
    
 
document.getElementById('target1').addEventListener('change', function() { 
 
     'use strict'; 
 
     var vis = document.querySelector('.vis'), 
 
      target = document.getElementById(this.value); 
 
    
 
    var e = document.getElementById("target"); 
 
    var selec = e.options[e.selectedIndex].text; 
 
    
 
     if (vis !== null) { 
 
      vis.className = 'inv'; 
 
     } 
 
     if (target !== null) { 
 
      target.className = 'vis'; 
 
     } 
 
    }); 
 

 

 
// send change event to element to select the first div..... 
 
var event = new Event('change'); 
 
document.getElementById('target').dispatchEvent(event); 
 
}

.inv 
 
{ 
 
    display:none; 
 
    } 
 
.vis 
 
{ 
 
    display:block; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 

 

 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#tabs-1">tab1</a></li> 
 
    <li><a href="#tabs-2">tab2</a></li> 
 
    <li><a href="#tabs-3">tab3</a></li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
    <p>tab1</p> 
 
    </div> 
 
    <div id="tabs-2"> 
 
    <select id="target" style="width:150px; margin-left:40px; height:20px"> 
 
        <option value="content_1">Option 1</option> 
 
        <option value="content_2">Option 2</option> 
 
       </select> 
 

 
       <div id="content_1" class="inv" style="width:252px; margin-left:-11px; height:300px"> 
 

 

 
      <a class="scopeTextArea-1">Content 1</a> 
 

 
       </div> 
 
       <div id="content_2" class="inv" style="width:252px; margin-left:-11px; height:300px"> 
 
        <a class="scopeTextArea-1">Content 2</a> 
 
       </div> 
 
    </div> 
 
    <div id="tabs-3"> 
 
<select id="target1" style="width:150px; margin-left:40px; height:20px"> 
 
        <option value="content2_1">Content 3</option> 
 
        <option value="content2_2">Content 4</option> 
 
       </select> 
 

 
       <div id="content2_1" class="inv" style="width:252px; margin-left:-11px; height:30px"> 
 
        <a class="scopeTextArea-1">Content 3</a> 
 

 
       </div> 
 
       <div id="content2_2" class="inv" style="width:252px; margin-left:-11px; height:300px"> 
 
        <a class="scopeTextArea-1">Content 4</a> 
 
       </div> 
 

 
    </div> 
 
</div> 
 

Answer 2

。 Idは常に一意でなければなりません。

したがって、id="target"をクラスclass="target"に変更すると、同じクラスの要素が複数ある可能性があります。

次に、すべての要素を"target"クラスで取得し、すべての要素の変更をリッスンする必要があります。

私は Arrayに要素のこのコレクションを変換する Array.prototype.slice.call、その後、クラス targetを持つすべての要素を取得するために getElementsByClassNameを使っあり

window.onload = function() { 
    var targetElements = Array.prototype.slice.call(document 
    .getElementsByClassName('target')); 
    targetElements.forEach(function(target){ 
     target.addEventListener('change', function() { 
      'use strict'; 
      var vis = document.querySelector('.vis'), 
       target = document.getElementById(this.value); 
      if (vis !== null) { 
       vis.className = 'inv'; 
      } 
      if (target !== null) { 
       target.className = 'vis'; 
      } 
     }); 
    }); 

// send change event to element to select the first div... 
var event = new Event('change'); 
document.getElementsByClassName('target')[0].dispatchEvent(event); 
}; 

。 forEachすべての要素を通過し、eventListenersを追加します。