javascript - Div 在选项卡类中显示/隐藏

Question

如果在两个选项卡类中选择，则尝试获取下拉列表以显示/隐藏 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 2 Tab 3

Answer 1

查看附件片段。

$(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>