css - 显示和隐藏菜单（一次只显示一个）

Question

我有这样的问题，我有一个包含一些隐藏子内容的菜单。当用户单击导航按钮时，会出现一些隐藏的内容。那部分很好，一切正常。

我需要知道的是，当我有一个导航项显示它的隐藏内容时。如果用户单击下一个导航项。我希望其他隐藏内容消失并出现新的隐藏内容。

我的灵感来自这个网站。http://www.o2.co.uk/如果您单击导航箭头项目。对此的任何帮助都会很棒。顺便说一句，所有的显示和隐藏效果都在工作。

谢谢任何可以帮助的人..

Answer 1

我假设您是在 javascript 中执行此操作。如果我在这里太初级，请原谅我。

您的功能（如果可以发布，那将很有帮助）不仅需要更改您单击的元素的显示属性，还需要将其更改为 display:none; 对于任何其他人。

因此，当您单击导航项时，您的 javascript 将该列表的显示属性更改为 :block 或其他任何内容，并且还将所有其他列表更改为 display:none。这有点蛮力，所以您也可以将当前除 :none 以外的任何其他内容更改为 :none。

Answer 2

为此，您将需要 jQuery，但是...

首先，我们将 onClick 函数与“link”类绑定到每个元素，我们告诉 onClick 在单击时隐藏所有具有“hidable”类的元素，然后在此链接中显示带有 rel 属性值 ID 的 div。 http://api.fatherstorm.com/test/4159899.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>


    <script>
            $(document).ready(function() {
                $('.link').each(function(){
                    $(this).click(function(){

                        $('.hidable').hide();
                        $($(this).attr('rel')).show();
                    });

                });
            });

        </script>



 <ul>

    <li class='link' rel='#div1'>l1</li>
    <li class='link' rel='#div2'>l2</li>
    <li class='link' rel='#div3'>l3</li>
    <li class='link' rel='#div4'>l4</li>
    <li class='link' rel='#div5'>l5</li>

        </ul>

    for the code block
    <div class='hidable' id='div1'>div 1</div>
    <div class='hidable' id='div2'>div 2</div>
    <div class='hidable' id='div3'>div 3</div>
    <div class='hidable' id='div4'>div 4</div>
    <div class='hidable' id='div5'>div 5</div>