简单的Onclick Javascript下拉导航，无需使用开关/选项卡

对使用Javascript来说，这是一个全新的概念。希望避免使用Jquery或其他框架

这是一个简单的下拉导航，我正在尝试使用我在此处找到的脚本创建：

我需要一些帮助来清理一些代码和一些指针。它的工作方式，我需要它，但想缩短了一点。谢谢

HTML:

Javascript:

<script type="text/javascript">

    function hide(){
        d1.style.display = 'none', 
        d2.style.display = 'none',
        d3.style.display = 'none', 
        d4.style.display = 'none', 
        d5.style.display = 'none'; 
    }


    function showhide1() {

        document.getElementById(d1);
        if(d1.style.display == 'block')
            hide();
        else
            d1.style.display = 'block', 
            d2.style.display = 'none',
            d3.style.display = 'none', 
            d4.style.display = 'none', 
            d5.style.display = 'none'; 

    }

    function showhide2() {
        document.getElementById(d2);
        if(d2.style.display == 'block')
            hide();
        else
            d2.style.display = 'block', 
            d1.style.display = 'none', 
            d3.style.display = 'none', 
            d4.style.display = 'none', 
            d5.style.display = 'none'; 
    }

    function showhide3() {
        document.getElementById(d3);
        if(d3.style.display == 'block')
            hide();
        else
            d1.style.display = 'none', 
            d2.style.display = 'none',
            d3.style.display = 'block', 
            d4.style.display = 'none', 
            d5.style.display = 'none'; 
    }

    function showhide4() {
        document.getElementById(d4);
        if(d4.style.display == 'block')
            hide();
        else
            d1.style.display = 'none', 
            d2.style.display = 'none',
            d3.style.display = 'none', 
            d4.style.display = 'block', 
            d5.style.display = 'none'; 
    }

    function showhide5() {
        document.getElementById(d5);
        if(d5.style.display == 'block')
            hide();
        else
            d1.style.display = 'none', 
            d2.style.display = 'none',
            d3.style.display = 'none', 
            d4.style.display = 'none', 
            d5.style.display = 'block'; 
    }


</script>

Java脚本 Html 希望能有所帮助

Java脚本 Html 希望能有所帮助

---

清理你的代码就像在说-我的车看起来不错，有人能帮我清理一下吗？？。。听起来不太吸引人。。是吗？？？。这个问题似乎离题了，因为它属于清理你的代码就像在说-我的车看起来很好，有人能帮我清理吗？？。。听起来不太吸引人。。这个问题似乎离题了，因为它属于一个主题

<script type="text/javascript">

    function hide(){
        d1.style.display = 'none', 
        d2.style.display = 'none',
        d3.style.display = 'none', 
        d4.style.display = 'none', 
        d5.style.display = 'none'; 
    }


    function showhide1() {

        document.getElementById(d1);
        if(d1.style.display == 'block')
            hide();
        else
            d1.style.display = 'block', 
            d2.style.display = 'none',
            d3.style.display = 'none', 
            d4.style.display = 'none', 
            d5.style.display = 'none'; 

    }

    function showhide2() {
        document.getElementById(d2);
        if(d2.style.display == 'block')
            hide();
        else
            d2.style.display = 'block', 
            d1.style.display = 'none', 
            d3.style.display = 'none', 
            d4.style.display = 'none', 
            d5.style.display = 'none'; 
    }

    function showhide3() {
        document.getElementById(d3);
        if(d3.style.display == 'block')
            hide();
        else
            d1.style.display = 'none', 
            d2.style.display = 'none',
            d3.style.display = 'block', 
            d4.style.display = 'none', 
            d5.style.display = 'none'; 
    }

    function showhide4() {
        document.getElementById(d4);
        if(d4.style.display == 'block')
            hide();
        else
            d1.style.display = 'none', 
            d2.style.display = 'none',
            d3.style.display = 'none', 
            d4.style.display = 'block', 
            d5.style.display = 'none'; 
    }

    function showhide5() {
        document.getElementById(d5);
        if(d5.style.display == 'block')
            hide();
        else
            d1.style.display = 'none', 
            d2.style.display = 'none',
            d3.style.display = 'none', 
            d4.style.display = 'none', 
            d5.style.display = 'block'; 
    }


</script>

function showhide(obj) {

                document.getElementById('d1').style.display = 'none';
                document.getElementById('d2').style.display = 'none';
                document.getElementById('d3').style.display = 'none';
                document.getElementById('d4').style.display = 'none';
                document.getElementById('d5').style.display = 'none';
                document.getElementById(obj).style.display = 'block';

            }

<div id="dropMenu">
    <ul>
        <li><a href="#" onclick="showhide('d1');">Advanced AGM</a>
        </li>
        <li><a href="#" onclick="showhide('d2');">Lithium-ION</a>
        </li>
        <li><a href="#" onclick="showhide('d3');">Chargers</a>
        </li>
        <li><a href="#" onclick="showhide('d4');">Mounts</a>
        </li>
        <li><a href="#" onclick="showhide('d5');">Accessories</a>
        </li>
    </ul>
</div>

<div id="d1" class="dropContent" style="display:block;">
This is Content 1.
</div>

<div id="d2" class="dropContent" style="display:none;">
This is Content 2.
</div>

<div id="d3" class="dropContent" style="display:none;">
This is Content 3.
</div>

<div id="d4" class="dropContent" style="display:none;">
This is Content 4.
</div>

<div id="d5" class="dropContent" style="display:none;">
This is Content 5.
</div>