创建选项卡,每个选项卡有两个文本区域
Create Tabs with each tab having two textarea
我想在HTML&点击每个选项卡时,它应该显示两个文本区域(空),我已经尝试过了,并且能够创建,但我的逻辑涉及到循环,以显示基于所选选项卡的文本区域。这对我的应用程序不支持,现在我想要一个简单的逻辑来创建和显示文本区域
我的JS代码:
function tabs(selectedtab) {
// contents
var s_tab_content = "tab_content_" + selectedtab;
//alert(s_tab_content);
var contents = document.getElementsByTagName("div");
for(var x=0; x<contents.length; x++) {
name = contents[x].getAttribute("name");
if (name == 'tab_content') {
if (contents[x].id == s_tab_content) {
contents[x].style.display = "block";
} else {
contents[x].style.display = "none";
}
}
}
}
HTML代码:
<html>
<body>
<div id="tab1" name="tab" style="cursor: pointer; cursor: hand; width:90px;
float: left;
height: 22px ;
margin-top: 0px;
background-color:lightgrey;
font-size: 13px;
text-align: center;
border-bottom: none;
display: table-cell;"
onClick="tabs(1)">
<div style="margin-top: 3px" >Tab1</div>
</div>
<div id="tab2" name="tab" style="cursor: pointer; cursor: hand; width:90px;background-color:lightgrey;float: left;height: 20px; margin-top: 2px; font-size: 12px;text-align: center" onClick="tabs(2)">
<div style="margin-top: 3px">Tab2</div>
</div>
<div style="width:auto;height: 22px; border-bottom-color: white;border-bottom-style: solid;border-bottom-width: 1px"></div>
<div name="tab_content" id="tab_content_1" style="display: block; margin-left:20px;" >
<br></br>
<br></br>
<div id="legendReport">
Notes 1:
</div>
<textarea id="reportNotes_textArea" name="textArea1" rows="4" value="" cols="50"></textarea>
<br></br>
<br></br>
<div id="legendRough">
Notes 2:
</div>
<textarea id="roughNotes_textArea" name="textArea2" rows="4" cols="50"></textarea>
</div>
<div name="tab_content" id="tab_content_2" class="tab_content" style="display: none;margin-left:20px;">
<br></br>
<br></br>
<textarea id="geometry_first_textArea" name="textArea3" rows="4" cols="50" ></textarea>
<br></br>
<br></br>
<textarea id="geometry_second_textArea" name="textArea4" rows="4" cols="50"></textarea>
<br></br>
<br></br>
<br></br>
<br></br>
<div id="legendRough">
Schematic:
</div>
<img id="myImage" src="" style="width:304px;height:228px;"></img>
</div>
</body>
</html>
首先:您使用name
属性来选择<div>
元素。根据规范,div不允许具有此属性。使用class
属性可能更适合您的需要。
<div class="tab_content" id="tab_content_1">...</div>
<div class="tab_content" id="tab_content_2">...</div>
第二:如果的选项卡要多于2个,那么最终需要某种循环。当显示一个新元素时,您必须能够隐藏其他元素。
如果像您的示例一样,只有2个选项卡,则可以使用document.querySelector
,如下所示:
function tabs(selectedtab) {
var s_tab_content = "#tab_content_" + selectedtab;
var tabToShow = document.querySelector(".tab_content" + s_tab_content);
var tabToHide = document.querySelector(".tab_content:not(" + s_tab_content + ")");
// Add your code to hide and show the tabs here:
// ...
}
第一个选择器选择第一个元素,该元素同时具有类"tab_content"和存储在s_tab_content
中的id。第二个选择器选择具有类"tab_content"而没有id的第一个元素。
然而,我的建议是保持循环并这样解决你的问题:
- 选择所有
tab_content
div - 全部隐藏
- 使用
document.getElementById
查找要显示的 - 展示你需要的
即使添加了许多选项卡,这也会继续工作。
相关文章:
- 我可以在Dynamics CRM 2016的复合地址字段中添加两个选项字段吗
- 在两个多选字段之间移动选项
- 在两个浏览器选项卡之间共享变量范围
- 仅在使用javascript和html的浏览器中在相同的两个选项卡之间切换
- 一个文本框,其中两个选项的值不同
- 如何使用jquery将两个字段组合为下拉菜单中的选项
- 两个不同部分的选项卡索引
- 如何减去选项两个相关的选择 HTML
- 高图表:设置两个不同系列图表的选项
- 两个选项卡—第一个选项卡在第二个选项卡中处于调试模式时被卡住
- 创建选项卡,每个选项卡有两个文本区域
- 从jquery中的select选项添加两个不同的数组值(text&value)
- 若在两个不同的选项卡中打开同一个页面,如何防止javascript运行两次
- 我有下面垂直菜单的jquery代码,当我悬停在apparels选项卡上时,我有两个选项卡作为apparels和化妆品
- 如何在HTML中用两个预定义的值绑定选择选项,以在mongodb中插入数据
- 我在angular JS中选择了一个默认选项,并删除了两个单词之间的下划线
- 如何在两个不同的选项卡(jQuery数据表)上同步处理可排序表
- 防止具有相同选项的两个复选框上的重复选项
- CRM 2011+问题与javascript中的两个选项集
- jquery克隆与HTML下拉选项两个下拉选择相同的值一个警报应该选择不同的值