Question

我想在HTML＆amp;中创建两个标签点击每个标签它应该显示两个文本区域（空），我已经尝试过并且能够创建，但我的逻辑涉及循环显示基于所选标签的文本区域。我的应用程序不支持，现在我想要一个简单的逻辑来创建和显示文本区域

我的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>

Answer 1

首先：您使用name属性来选择<div>元素。根据{{3}}，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:
  // ...
}

第一个选择器选择第一个元素 ＆＃39; tab_content＆＃39;和 id 您已存储在s_tab_content中。第二个选择器选择具有类＆＃39; tab_content＆＃39;的第一个元素。没有 ID。

我的建议是保持循环并解决你的问题：

选择所有tab_content divs

全部隐藏

使用document.getElementById查找一个以显示

显示您需要的那个

即使添加了很多标签，这也会继续有效。

创建选项卡，每个选项卡都有两个textarea

1 个答案: