Div显示/隐藏选项卡类
Div Show/Hide within Tab Classes
如果在两个选项卡类中选择,尝试下拉显示/隐藏div。已经设法让这个工作在第一个选项卡感谢这个解决方案
下面是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);
}
有什么好主意吗?对不起,如果这是直接的(或不)。我是新手,正在做一个个人项目。感谢你对我的帮助。
以下是一些屏幕截图:
请看附件中的代码片段。
$(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>
不能对多个元素使用相同的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
。
相关文章:
- 将选项值附加到隐藏字段
- 使用jQuery选项卡来显示或隐藏其他内容
- jQuery无法在IE9中隐藏选项
- 使用Javascript根据URL中的关键字隐藏下拉选项
- 隐藏/显示下面的分区根据是否选择某个选项进行选择
- 更改所选选项更改时的页眉和隐藏文本字段
- 如何使用jQuery隐藏与选择选项相关的选择选项列表
- 隐藏结账按钮,直到选择发货选项
- 显示/隐藏下拉选项取决于另一个下拉选择
- 隐藏选择选项,并在单击定义的选项后显示它们
- CSS Html使图像显示在单选按钮的选项上(单选按钮被CSS隐藏)
- 表单域中的选项隐藏下一个域中的选项
- 如何使用 JavaScriptJQuery 将隐藏输入标签的值与选择标签的选定选项的值进行设置
- 根据选择语句选项隐藏 Div 类
- 选择选项隐藏和显示
- 谷歌图表选项隐藏y标签和注释
- Javascript根据所选选项隐藏值
- 根据下拉菜单中的选定选项隐藏表单
- JavaScript -根据选择的选项隐藏按钮
- 根据选择选项隐藏和显示选择选项