如何在“文件”标签中添加内容？

时间：2017-01-14 20:06:40

标签： javascript html css

请帮助解决我的javascript错误。

点击“文件”按钮后，它应取消隐藏<div id="Files" class="tabcontent">并隐藏<div id="Overview" class="tabcontent">

我想通过几个首先隐藏.tabcontent个区域的循环执行此操作，然后取消隐藏#Files或#Overview - 但我的js无效。< / p>

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<style>
tab1 { padding-left: 2em; }
body {font-family: arial;
 background-color: #00111a;
  color: white;

}
 .button1 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 12px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    background-color: #1ab2ff; 
    color: white;
    font-weight: bold;
    transition: 0.3s;
 
}
.button1:hover {
    background-color: #66ccff;
}
.button1:active {
    background-color: #0088cc;
}

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1ab2ff;
    display: inline-block;
}
ul.tab li {float: left; display: inline-block;}
ul.tab li a {
    display: inline-block;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.tab li a:hover {
    background-color: #66ccff;
}
ul.tab li a:focus, .active {
    background-color: #0088cc;
}
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}
h3 {
      opacity: 0.5;
}
p {
      opacity: 0.5;
}
</style>
<body>
<tab1><h2>SuperBlaze27-Core</h2>
<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Overview')" id="defaultOpen">Overview</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Files')">Files</a></li>
</ul>
<div id="Overview" class="tabcontent">
  <h3>SuperBlaze27 Core</h3>
  <p>
  Still in development but really cool!<br>
  If you want to download click the spoiler button or click files. In the spoiler is the latest version. I would reccomend downloading from the files section. ;)
    <div class="spoiler">
    <input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
    <div class="inner" style="display:none;">
    <h3>www.superblaze27.com/site/minecraft/plugins/spigot/projects/superblaze27-core/downloads/latest</h3>
    </div>
  </p>
</div>
<div id="Files" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>
<script>
function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
</script>

</script> 
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

以上是我的代码。如果你能提供帮助，那将非常有帮助！ THX提前！

2 个答案:

答案 0 :(得分：0)

首先，您缺少一些结束标记，其中一个意味着您的Files div位于Overview div中。隐藏概述将隐藏文件。

使用类隐藏所需的div也是最简单的。请参阅下面的修订示例。

＆＃13;
＆＃13; 
function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        addClass('hidden', tabcontent[i]);
        if (tabcontent[i].id==tabName){
          //alert(tabName);
          removeClass('hidden', tabcontent[i]);
        }
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function showSpoiler(obj){
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
}
function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}
＆＃13; 
tab1 { padding-left: 2em; }
body {font-family: arial;
 background-color: #00111a;
  color: white;

}
 .button1 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 12px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    background-color: #1ab2ff; 
    color: white;
    font-weight: bold;
    transition: 0.3s;
 
}
.button1:hover {
    background-color: #66ccff;
}
.button1:active {
    background-color: #0088cc;
}

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1ab2ff;
    display: inline-block;
}
ul.tab li {float: left; display: inline-block;}
ul.tab li a {
    display: inline-block;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.tab li a:hover {
    background-color: #66ccff;
}
ul.tab li a:focus, .active {
    background-color: #0088cc;
}
.hidden{display:none;}
.tabcontent {
    padding: 6px 12px;
    border-top: none;
}
h3 {
      opacity: 0.5;
}
p {
      opacity: 0.5;
}
.active{display:block;}
＆＃13; 
<body>
<tab1>
  <h2>SuperBlaze27-Core</h2>
  <ul class="tab">
    <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Overview')" id="defaultOpen">Overview</a></li>
    <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Files')">Files</a></li>
  </ul>
  <div id="Overview" class="tabcontent">
  <h3>SuperBlaze27 Core</h3>
  <p>Still in development but really cool!<br>If you want to download click the spoiler button or click files. In the spoiler is the latest version. I would reccomend downloading from the files section. ;)</p>
  <div class="spoiler">
    <input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
    <div class="inner" style="display:none;">
      <h3> www.superblaze27.com/site/minecraft/plugins/spigot/projects/superblaze27-core/downloads/latest
      </h3>
    </div>
  </div><!-- .spoiler -->
</div><!-- #Overview -->
<div id="Files" class="tabcontent hidden">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>
＆＃13;
＆＃13;
＆＃13;

资源（请upvote）：

How do I add a class to a given element?

答案 1 :(得分：0)

问题是你需要在#files div之前添加一个结束div标签。您没有关闭其中一个内部div标签，因此当您使用tabContents类隐藏div时，它会同时隐藏Overview和Files div。

这是工作代码：

<!DOCTYPE html>
<html>
<style>
tab1 { padding-left: 2em; }
body {font-family: arial;
 background-color: #00111a;
  color: white;

}
 .button1 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 12px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    background-color: #1ab2ff; 
    color: white;
    font-weight: bold;
    transition: 0.3s;

}
.button1:hover {
    background-color: #66ccff;
}
.button1:active {
    background-color: #0088cc;
}

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1ab2ff;
    display: inline-block;
}
ul.tab li {float: left; display: inline-block;}
ul.tab li a {
    display: inline-block;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.tab li a:hover {
    background-color: #66ccff;
}
ul.tab li a:focus, .active {
    background-color: #0088cc;
}
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}
h3 {
      opacity: 0.5;
}
p {
      opacity: 0.5;
}
</style>
<body>
<tab1><h2>SuperBlaze27-Core</h2>
<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Overview')" id="defaultOpen">Overview</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Files')">Files</a></li>
</ul>
<div id="Overview" class="tabcontent">
  <h3>SuperBlaze27 Core</h3>
  <p>
  Still in development but really cool!<br>
  If you want to download click the spoiler button or click files. In the spoiler is the latest version. I would reccomend downloading from the files section. ;)
    <div class="spoiler">
        <input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
        <div class="inner" style="display:none;">
        <h3>www.superblaze27.com/site/minecraft/plugins/spigot/projects/superblaze27-core/downloads/latest</h3>
        </div>
    </div>
  </p>
</div>
<div id="Files" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>
<script>
function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
</script>

</script> 
</body>
</html>
相关问题
最新问题