javascript - 重置功能，所以当时只有一个打开

Question

我又遇到了一个问题。

我在下面有这个功能，它工作得很好，除非你已经点击了一个可见的 div。我需要它来重置整个东西，然后在您单击它时运行该功能。 我现在很迷茫。

    <nav>
        <ul>
            <li id="home" onclick="showAndHidediv('homeBox', 'home');"><a href="#" class="menuHovers"><i class="fa fa-home"></i><div class="hiddenFormMouseoverButton">Home</div></a>
                <img src="GFX/arrow.png" />
            </li>
            <li id="test" onclick="showAndHidediv('testbox', 'test');"><a href="#" class="menuHovers"><i class="fa fa-dashboard"></i><div class="hiddenFormMouseoverButton">Dashboard</div></a>
            <img src="GFX/arrow.png" />
            </li>
        </ul>
    </nav>
    <div class="menuBox" id="homeBox">
        <h2>Home</h2>
        <p>Her kan du redigere dine oplysninger på forsiden. Det kan fx. være teksterne i de bokse du ser på forsiden, eller måske en udskiftning af et billede i slideren. </p>
        <ul>
            <li>
                <a href="Home.aspx">Informationsbokse</a>
            </li>
            <li>
                <a href="#">Slider</a>
            </li>
            <li>
                <a href="#">SEO</a>
            </li>
        </ul>
    </div>
    <div class="menuBox" id="testbox">
        <h2>Test</h2>
        <p>Her kan du redigere dine oplysninger på forsiden. Det kan fx. være teksterne i de bokse du ser på forsiden, eller måske en udskiftning af et billede i slideren. </p>
        <ul>
            <li>
                <a href="Home.aspx">Test 1</a>
            </li>
            <li>
                <a href="#">Test 2 </a>
            </li>
            <li>
                <a href="#">Test 3</a>
            </li>
        </ul>
    </div>


    var open = "closed";

    function showAndHidediv(id, liName) {
        $("#" + id).toggle(function () {
            $("#" + id).animate({
                display: 'block'
            }, 500);

            if (open == "open") {
                $("#" + liName + " a").removeClass('color');
                $("#" + liName + " a div").removeClass('block');
                $("#" + liName + " img").removeClass('block');
                open = "closed";
            } else {
                $("#" + liName + " a").addClass('color');
                $("#" + liName + " a div").addClass('block');
                $("#" + liName + " img").addClass('block');
                open = "open";
            }
        });
    }

Answer 1

这里是一个纯CSS标签的教程

https://css-tricks.com/css3-tabs/

<span id="tab1" class="tabNav"></span>
<span id="tab2" class="tabNav"></span>


<a href="#tab1">tab1</a>
<a href="#tab2">tab2</a>    

<article id="tab-content1">some text</article>
<article id="tab-content2">some other text</article>

我使用固定位置来防止滚动跳跃行为

.tabNav {
    position:fixed;
    left:0;
    top:0;
}
article {
    display:none;
}
#tab2:target ~ #tab-content2,
#tab2:not(:target) ~ #tab-content1 {
    display:block;
}

这是一个 jsfiddle:https://jsfiddle.net/

这是另一个 jsfiddle:https://jsfiddle.net/8fcw1nhy/