创建选项卡，每个选项卡有两个文本区域

Create Tabs with each tab having two textarea

本文关键字：选项 两个 区域 文本 创建      更新时间：2024-05-02

我想在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的第一个元素。

然而，我的建议是保持循环并这样解决你的问题：

  1. 选择所有tab_contentdiv
  2. 全部隐藏
  3. 使用document.getElementById查找要显示的
  4. 展示你需要的

即使添加了许多选项卡，这也会继续工作。

相关文章：