<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代码因为我是新手,它真的很长而且很混乱。如果您需要我可以稍后发布
<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>