在单独的div标签中单击时，如何使每个标签显示不同的文本块？

Question

<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标签的文本始终存在并且不会消失。 如果您随机单击每个标签，它也将不起作用。 我想要的是能够单击每个a标签，然后仅显示相应的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>

Answer 1

别担心。 每个人都从某个地方开始。 我创建了一个JS Fiddle，它具有您正在寻找的行为，并大大简化了JS。 https://jsfiddle.net/

我希望这有帮助。 如果您有任何疑问，请告诉我