Question

我正在使用JS功能，我有一个选项卡式面板，每个选项卡在同一个HTML文件中打开一个部门。我设置了默认显示的第一个标签（这些内容将在页面加载时激活）。但是，当我尝试单击第二个选项卡时，我的指定选项卡的内容不会显示。

每个标签下显示的HTML表单

First Tab的内容属于addRequest分区

<div id="addRequest" class="tabcontent">

<div id="form_container">

<!--<h1><a>Acquisition</a></h1>-->
<form id="form_1147240" class="appnitro"  method="post" action="">
    <div class="form_description">
        <h2>Acquisition</h2>
        <p>Enter the details of the material required</p>
    </div>
    <ul >

        <div id="leftDiv" style="float: left; width: 50%;" >

            <!--Material Type-->

            <li id="li_7" >
                <label class="description" for="element_7">Material Type </label>
                <div class = "listItems">
                    <select class="element select medium" id="element_7" name="element_7">
                        <option value="" selected="selected"></option>
                        <option value="1" >Books</option>
                        ...

第二个标签的内容属于addNewMaterial分部

<div id="addNewMaterial" class="tabcontent">
    <div id="form_container1">
        <form id="form_11472401" class="appnitro"  method="post" action="">
            <div class="form_description">
                <h2>Acquisition</h2>
                <p>Enter the details of the new material</p>
            </div>
            <ul >

                <div id="leftDiv1" style="float: left; width: 50%;" >

                    <!--Material Type-->

                    <li id="li_71" >
                        <label class="description" for="element_71">Material Type </label>
                        <div class = "listItems">
                            <select class="element select medium" id="element_71" name="element_71">
                                <option value="" selected="selected"></option>
                                <option value="1" >Books</option>

标签栏

<body>

<ul class="tab">
    <li><a href="#" class="tablinks" onclick="openTab(event, 'addRequest')">Add Request</a></li>
    <li><a href="#" class="tablinks" onclick="openTab(event, 'addNewMaterial')">New Materials</a></li>
 </ul>
<div id="addRequest" class="tabcontent">
<div id="form_container">

JS功能

function openTab(evt, divisionId) {
// Declare all variables
var i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(divisionId).style.display = "block";
evt.currentTarget.className += " active";
}

Answer 1

尝试将以下代码放在java脚本代码中。我正在尝试使用您的代码创建jsfiddle。很抱歉jsfiddle中的格式不正确，但您可以看到输出窗口正常工作。看看我的fiddle

document.getElementById('addRequest').style.display = "block";
document.getElementById('addNewMaterial').style.display = "none";

显示选项卡内容 - Javascript

1 个答案: