无法重用代码块但不确定要更改的内容

时间：2017-11-13 15:40:39

标签： javascript html css

我对html，javascript和css的理解有限。我在下面的代码中创建了标签内容，但我似乎无法保留First Use的标签和Second Use的标签同时打开。我曾尝试更改类名，ID，函数名等，但这会破坏它或导致它无法按预期工作。我需要在第二个块中更改什么才能使它们作为两个独立的实体工作？如何保持两个用户的标签一次打开？任何帮助将不胜感激。

/* First Use */

<html>
<head>
<style>
body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
   
    border-bottom: 1px solid #727272;
    width: 100%;
}

/* Style the buttons inside the tab */
div.tab button {
    float: left;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    border-radius: 0;
    cursor: pointer;
    width: 20%;
    height: 50px;
    transition: 0.3s;
    font-size: 12px;
    text-align: center;
    line-height: 1.5em;
    /* position: relative; */
    /* top: -6px; */
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #727272;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #637dff;
    color: #ffffff;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: none;
}
</style>
</head>
<body>

<div class="tab">
  <button class="tablinks" onclick="openSection(event, 'Section 1')" id="defaultOpen">Hydrogeological Investigations</button>
  <button class="tablinks" onclick="openSection(event, 'Section 2')">Construction Dewatering</button>
  <button class="tablinks" onclick="openSection(event, 'Section 3')">Land Development</button>
  <button class="tablinks" onclick="openSection(event, 'Section 4')">Feature Based Water Balance</button>
  <button class="tablinks" onclick="openSection(event, 'Section 5')">Environmental Monitoring</button>
</div>

<div id="Section 1" class="tabcontent">
  <h3>Hydrogeological Investigations</h3>
  <p>Section 1 Text Here.</p>
<img src="http://watermarkenv.ca/wp-content/uploads/2017/10/groundwater-835827.jpg" style="height: 50%; width: 50%">

<div style="text-align: right"><a href="http://watermarkenv.ca/hydrogeological-services/#web-hg-services"><i class="fa fa-arrow-circle-up" style="font-size: 30px"></i></a></div>
</div>

<div id="Section 2" class="tabcontent">
  <h3>Construction Dewatering</h3>
  <p>Section 2 text here.</p>

<div style="text-align: right"><a href="http://watermarkenv.ca/hydrogeological-services/#web-hg-services"><i class="fa fa-arrow-circle-up" style="font-size: 30px"></i></a></div>  
</div>

<div id="Section 3" class="tabcontent">
  <h3>Land Development</h3>
  <p>Section 3 text here.</p>
  
<div style="text-align: right"><a href="http://watermarkenv.ca/hydrogeological-services/#web-hg-services"><i class="fa fa-arrow-circle-up" style="font-size: 30px"></i></a></div>
</div>

<div id="Section 4" class="tabcontent">
  <h3>Feature Based Water Balance</h3>
  <p>Section 4 text here.</p>
  
<div style="text-align: right"><a href="http://watermarkenv.ca/hydrogeological-services/#web-hg-services"><i class="fa fa-arrow-circle-up" style="font-size: 30px"></i></a></div>  
</div>

<div id="Section 5" class="tabcontent">
  <h3>Environmental Monitoring</h3>
  <p>Section 5 text here.</p>
  
<div style="text-align: right"><a href="http://watermarkenv.ca/hydrogeological-services/#web-hg-services"><i class="fa fa-arrow-circle-up" style="font-size: 30px"></i></a></div>
</div>

<script>
function openSection(evt, sectionName) {
    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(sectionName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
     
</body>
</html> 

/* Second Use */

<html>

<div class="tab">
  <button class="tablinks" onclick="openSection(event, 'Section 1 env')" id="defaultOpenenv">Blah</button>
  <button class="tablinks" onclick="openSection(event, 'Section 2 env')">Blah</button>
  <button class="tablinks" onclick="openSection(event, 'Section 3 env')">Blah</button>
  <button class="tablinks" onclick="openSection(event, 'Section 4 env')">Blah</button>
  <button class="tablinks" onclick="openSection(event, 'Section 5 env')">Blah</button>
</div>

<div id="Section 1 env" class="tabcontent">
  <h3>Hydrogeological Investigations</h3>
  <p>Section 1 Text Here. Second Use</p>
<img src="http://watermarkenv.ca/wp-content/uploads/2017/10/groundwater-835827.jpg" style="height: 50%; width: 50%">

<div style="text-align: right"><a href="http://watermarkenv.ca/hydrogeological-services/#web-hg-services"><i class="fa fa-arrow-circle-up" style="font-size: 30px"></i></a></div>
</div>

<div id="Section 2 env" class="tabcontent">
  <h3>Construction Dewatering</h3>
  <p>Section 2 text here.</p>

<div style="text-align: right"><a href="http://watermarkenv.ca/hydrogeological-services/#web-hg-services"><i class="fa fa-arrow-circle-up" style="font-size: 30px"></i></a></div>  
</div>

<div id="Section 3 env" class="tabcontent">
  <h3>Land Development</h3>
  <p>Section 3 text here.</p>
  
<div style="text-align: right"><a href="http://watermarkenv.ca/hydrogeological-services/#web-hg-services"><i class="fa fa-arrow-circle-up" style="font-size: 30px"></i></a></div>
</div>

<div id="Section 4 env" class="tabcontent">
  <h3>Feature Based Water Balance</h3>
  <p>Section 4 text here.</p>
  
<div style="text-align: right"><a href="http://watermarkenv.ca/hydrogeological-services/#web-hg-services"><i class="fa fa-arrow-circle-up" style="font-size: 30px"></i></a></div>  
</div>

<div id="Section 5 env" class="tabcontent">
  <h3>Environmental Monitoring</h3>
  <p>Section 5 text here.</p>
  
<div style="text-align: right"><a href="http://watermarkenv.ca/hydrogeological-services/#web-hg-services"><i class="fa fa-arrow-circle-up" style="font-size: 30px"></i></a></div>
</div>

<script>
function openSection(evt, sectionName) {
    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(sectionName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpenenv").click();
</script>
     
</body>
</html>

1 个答案:

答案 0 :(得分：0)

您需要使用唯一的$my_posts = new WP_Query; $myposts = $my_posts->query( array('post_type' => 'post')); foreach ($myposts as $post ) { echo $post->post_title; } 才能生效。在第二次使用中点击标识为id's的标签时，它会在首次使用时打开Section 2的标签内容。

相关问题
最新问题