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

时间:2016-02-20 21:03:21

标签: javascript html onclick

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

0 个答案:

没有答案