0
<aside class="side_article_content"><p id="defaultText">Chakras are blah blah blah</p>
<p id="baseChakraInfo" style="display:none;">Base Chakra blah blah blah</p>
<p id="sacralChakraInfo" style="display:none;">Sacral Chakra blah blah blah</p>
<p id="solarPlexusChakraInfo" style="display:none;">Solar Plexus Chakra blah blah blah</p>
<p id="heartChakraInfo" style="display:none;">Heart Chakra blah blah blah</p>
<p id="throatChakraInfo" style="display:none;">Throat Chakra blah blah blah</p>
<p id="browChakraInfo" style="display:none;">Brow Chakra blah blah blah</p>
<p id="crownChakraInfo" style="display:none;">Crown Chakra blah blah blah</p></aside>
</div>
<div class="main">
<ul>
<li><a href="javascript:void(0)" id="base" onClick="showBase(this);" class="_base">Base or Root</a></li>
<li><a id="sacral" href="javascript:void(0)" onClick="showSacral(this);" class="_sacral" >Sacral</a></li>
<li><a id="solarPlexus" href="javascript:void(0)" onClick="showSolarPlexus(this);" class="_solar">Solar Plexus</a></li>
<li><a id="heart" href="javascript:void(0)" onClick="showHeart(this);" class="_heart" >Heart</a></li>
<li><a id="throat" href="javascript:void(0)" onClick="showThroat(this);" class="_throat">Throat</a></li>
<li><a id="brow" href="javascript:void(0)" onClick="showBrow(this);" class="_brow">Brow</a></li>
<li><a id="crownChakra" href="javascript:void(0)" onClick="showCrownChakra(this);" class="chakra_crown" title="Crown Chakra">Crown Chakra - Pineal gland, regulates biological cycles, including sleep.</a></li>
</ul>
</div>
我有一些JavaScript下面這真的很混亂，它的工作幾乎完美。它的工作原理是，如果我點擊每個標籤從上到下，每個p標籤中的文本都會顯示，一旦下一個標籤被點擊，前一個消失 - 這正是我想要的。但是，如果從底部到頂部單擊每個標籤，每個p標籤的文本始終存在，並且不會消失。如果您隨意點擊每個標籤，它也不起作用。我想要的是能夠點擊每個標籤並僅顯示相應的p標籤。我不想在這裏發佈我的JS代碼，因爲我對它很陌生，而且它真的很長，很雜亂。如果您需要我可以稍後發佈如何讓每個標籤在單獨的div標籤中單擊時顯示不同的文本塊？
<script>
function showBase(text) {
if(text.id == "base") {
document.getElementById("baseChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("sacralChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("heartChakraInfo").style.display = "none";
document.getElementById("throatChakraInfo").style.display = "none";
document.getElementById("browChakraInfo").style.display = "none";
}
else {
document.getElementById("baseChakraInfo").style.display = "none";
}
}
function showSacralChakra(text) {
if(text.id == "sacralChakra") {
document.getElementById("sacralChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("baseChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("heartChakraInfo").style.display = "none";
document.getElementById("throatChakraInfo").style.display = "none";
document.getElementById("browChakraInfo").style.display = "none";
}
else {
document.getElementById("sacralChakraInfo").style.display = "none";
}
}
function showSolarPlexus(text) {
if(text.id == "solarPlexus") {
document.getElementById("solarPlexusChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("baseChakraInfo").style.display = "none";
document.getElementById("sacralChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("heartChakraInfo").style.display = "none";
document.getElementById("throatChakraInfo").style.display = "none";
document.getElementById("browChakraInfo").style.display = "none";
}
else {
document.getElementById("solarPlexusChakraInfo").style.display = "none";
}
}
function showHeart(text) {
if(text.id == "heart") {
document.getElementById("heartChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("baseChakraInfo").style.display = "none";
document.getElementById("sacralChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("throatChakraInfo").style.display = "none";
document.getElementById("browChakraInfo").style.display = "none";
}
else {
document.getElementById("heartChakraInfo").style.display = "none";
}
}
function showThroat(text) {
if(text.id == "throat") {
document.getElementById("throatChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("baseChakraInfo").style.display = "none";
document.getElementById("sacralChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("heartChakraInfo").style.display = "none";
document.getElementById("browChakraInfo").style.display = "none";
}
else {
document.getElementById("throatChakraInfo").style.display = "none";
}
}
function showBrow(text) {
if(text.id == "brow") {
document.getElementById("browChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("baseChakraInfo").style.display = "none";
document.getElementById("sacralChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("heartChakraInfo").style.display = "none";
document.getElementById("throatChakraInfo").style.display = "none";
}
else {
document.getElementById("browChakraInfo").style.display = "none";
}
}
function showCrown(text) {
if(text.id == "crown") {
document.getElementById("crownChakraInfo").style.display = "block";
document.getElementById("defaultText").style.display = "none";
document.getElementById("baseChakraInfo").style.display = "none";
document.getElementById("sacralChakraInfo").style.display = "none";
document.getElementById("solarPlexusChakraInfo").style.display = "none";
document.getElementById("heartChakraInfo").style.display = "none";
document.getElementById("throatChakraInfo").style.display = "none";
document.getElementById("browChakraInfo").style.display = "none";
}
else {
document.getElementById("crownChakraInfo").style.display = "none";
}
}
</script>
沒有你的JS代碼就不能幫你 – ken4z
所以我編輯了我的帖子並粘貼了我的JS代碼。請不要在我身上發瘋，這是多麼的混亂。我相信有一個更短的方法來做到這一點，但我是一個新手。在此先感謝ken4z – user3847213