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>

Answer 2

您不能对多个元素使用相同的ID（target）。 ID应该始终是唯一的。

因此，我们可以将id="target"更改为类class="target"，因为可能有多个具有相同类的元素。

然后你需要获得"target"类的所有元素，并监听每个元素的变化。

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);
};

我使用getElementsByClassName来获取类target的所有元素，然后使用Array.prototype.slice.call将此元素集合转换为Array。并forEach通过所有元素并添加eventListeners。

在标签类中显示/隐藏

2 个答案: