コードのブロックを再利用できませんが、変更する内容がわからない

-1

私はhtml、javascript、およびcssの理解が限られています。私はタブの内容を作成するこのコードを持っているが、私は最初の使用からタブを維持すると同時に2番目の使用からのタブを開いているように見えることはできません。私はクラス名、ID、関数名などを変更しようとしましたが、これはブレークまたは意図したとおりに動作しません。 2つの別々のエンティティとして機能するように、2番目のブロックで何を変更する必要がありますか？どのようにして両方の用途からタブを一度に開いたままにすることができますか？どんな助けでも大歓迎です。コードのブロックを再利用できませんが、変更する内容がわからない

/* 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>

出典

2017-11-13 Ian Gardiner

よくjavaとjavascriptは同じものではありません。 ;） – epascarello

試したコードがうまくいかなかったのは何ですか？あなたは名前を変えて、私に同じように見えると言った。 – epascarello

ブートストラップのナビゲーションタブを使って簡単にすることができますhttps://getbootstrap.com/docs/4.0/components/navs/ – karen