我正在嘗試保留一個靜態內容串列（大約 10 個專案符號點），當單擊每個不同的標題/標題時，該串列將顯示和隱藏文本。我可以到達那里，但我認為我走了很長的路，因為我不熟悉 JS。
想知道是否有人可以向我展示一種更好/更簡單的方法來做到這一點，因為我的 JS 看起來非常愚蠢，我不得不為我的方法重復很多次。
旁注：出于某種原因，我需要單擊標題/標題兩次才能使 JS 作業
function pointOne() {
var x = document.getElementById("contentOne");
var y = document.getElementById("firstText");
var z = document.getElementById("contentTwo");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
z.style.display = "none";
}
}
function pointTwo() {
var x = document.getElementById("contentTwo");
var y = document.getElementById("firstText");
var z = document.getElementById("contentOne");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "none";
z.style.display = "none";
}
}#contentOne, #contentTwo {
display: none;
} <div style="background-color: #eee; padding: 10px;">
<div id="firstText">
<p>A welcoming text blurb here</p>
</div>
<div id="contentOne">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">1. Title number one</span></strong></span></p><p>Text blurb of title 1
</p>
</div>
<div id="contentTwo">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">2. Title number two</span></strong></span></p><p>Text blurb of title 2
</p>
</div>
</div>
<div>
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;color: #ccc">Table Of Contents</span></strong></span></p><p>
<a href="#point1" onclick="pointOne()">1. Title 1 to click</a><br><br>
<a href="#point2" onclick="pointTwo()">2. Title 2 to click</a></p>
</div>uj5u.com熱心網友回復：
您可以通過向元素本身傳遞一個引數來創建一個適用于所有點的函式。
這應該使添加新元素變得更加容易，因為您不必撰寫任何新函式
在按鈕中你可以添加一個 data-contentId 標簽來設定內容 id 并在 js 中訪問它：
function point(button) {
//var x = document.getElementById("contentOne");
//var y = document.getElementById("firstText");
//var z = document.getElementById("contentTwo");
const content = document.getElementById(button.dataset.contentid);
//console.log(content.style);
const display = getComputedStyle(content)["display"];
const container = button.parentElement.children;
const firstText = document.getElementById("firstText");
let contents
for (let i = 0; i < container.length; i ) {
contents = container[i].dataset.contentid;
if(contents) /*in case its a br element*/ document.getElementById(container[i].dataset.contentid).style.display="none";
}
if(display === "none"){
content.style.display = "block";
firstText.style.display = "none";
}else{
content.style.display = "none";
firstText.style.display = "block";
}
}#contentOne, #contentTwo {
display: none;
}
.content {
display: none;
} <div style="background-color: #eee; padding: 10px;">
<div id="firstText">
<p>A welcoming text blurb here</p>
</div>
<div id="contentOne" class="content">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">1. Title number one</span></strong></span></p><p>Text blurb of title 1
</p>
</div>
<div id="contentTwo"class="content">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">2. Title number two</span></strong></span></p><p>Text blurb of title 2
</p>
</div>
<div id="content3"class="content">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">An example</span></strong></span></p><p>Text blurb of title 3
</p>
</div>
<div id="content4"class="content">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">It works</span></strong></span></p><p>Yh it does
</p>
</div>
<div id="content5"class="content">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">Another one</span></strong></span></p><p>Epic
</p>
</div>
<div id="content6"class="content">
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">Its much easier instead of writing separate functiones</span></strong></span></p><p>Ofc it is
</p>
</div>
</div>
<div>
<p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;color: #ccc">Table Of Contents</span></strong></span></p>
<div>
<a data-contentId="contentOne" href="#point1" onclick="point(this)">1. Title 1 to click</a><br><br>
<a data-contentId="contentTwo" href="#point2" onclick="point(this)">2. Title 2 to click</a><br><br>
<a data-contentId="content3" href="#point2" onclick="point(this)">3. Title 2 to click</a><br><br>
<a data-contentId="content4" href="#point2" onclick="point(this)">4. Title 2 to click</a><br><br>
<a data-contentId="content5" href="#point2" onclick="point(this)">5. Title 2 to click</a><br><br>
<a data-contentId="content6" href="#point2" onclick="point(this)">6. Title 2 to click</a>
</div>
</div>uj5u.com熱心網友回復：
如果您在編碼時必須多次重復自己，這絕不是一個好兆頭。
我不知道你打算做什么，但如果可以的話，我會建議使用引導程式，讓您的生活很多更加容易。使用 Bootstrap，您可以使用“折疊”來實作您的目標。操作方法如下：Bootstrap Collapse Example
如果您不熟悉 Bootstrap，您可以在這里找到很好的幫助。
由于在 Collapse 示例中需要串列項而不是按鈕，因此collapse 還應該與其他 html 標簽一起使用，而不僅僅是按鈕。
uj5u.com熱心網友回復：
由于您尚未發布完整的方案，因此可能有多種解決方案。我只發布一個，此代碼將幫助您了解如何使您的功能可重用。
<div>
<p>A welcoming text blurb here</p>
</div>
<div>
<p>
<span style="font-size: 20pt;">
<strong>
<span id="main_content_heading_area"
style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">1. Title
number
one</span>
</strong>
</span>
</p>
<p id="blurb_content_heading_area">
Text blurb of title 1
</p>
</div>
</div>
<div>
<p><span style="font-size: 20pt;"><strong><span
style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;color: #ccc">Table Of
Contents</span></strong></span>
</p>
<p>
<a href="javascript:void();" onclick="toggleContentOnButtonClick('1. Title number one','Text blurb of title 1')">1.
Title 1
to
click</a><br><br>
<a href="javascript:void();" onclick="toggleContentOnButtonClick('2. Title number two','Text blurb of title 2')">2.
Title 2
to click</a>
</p>
</div>
<script>
function toggleContentOnButtonClick(heading, sub_heading) {
document.querySelector("#main_content_heading_area").innerHTML = heading;
document.querySelector("#blurb_content_heading_area").innerHTML = sub_heading;
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330119.html
標籤：javascript html css
下一篇：如何在同一行中對齊兩個標題？