Question

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

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

我的灵感来自这个网站。 http://www.o2.co.uk/如果您点击导航箭头项目。对此的任何帮助都会很棒。顺便说一下，所有的Show和Hide效果都有效。

感谢任何可以提供帮助的人..

Answer 1

我假设你在javascript中这样做。如果我在这里太小学，请原谅我。

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

因此，当您单击导航项时，您的javascript会将该列表的display属性更改为：block或者其他，并且还会更改所有其他列表以显示：none。这有点蛮力，所以你也可以改变其他目前除了以外的东西：none to：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>

Answer 3

您好FatherStorm和Bikeboy389，

感谢您的评论。是的，我正在使用Jquery。这是我到目前为止所做的。

JQUERY

<script type="text/javascript">
    $(function() {
        $("#nav-box").hide();
        //run the currently selected effect

        function runEffect(){
            //get effect type from 
            var selectedEffect = $('#effectTypes').val();
            var options = {};
            //run the effect
            $("#nav-box").toggle("blind",options,500);
            $(this).toggleClass("active").next().slideToggle("slow");
        };

        //set effect from select menu value
        $("ul#main-nav li a.kingfisher").click(function() {
            runEffect();
            return false;
        });//Close Run Effect Function

        $(document).ready(function(){
            $("#nav-box").hide(); 
                $("ul#main-nav li a.kingfisher").click(function(){  
                $(this).toggleClass("active").next();
            });
        });

        $(document).ready(function(){
            $("#nav-box").hide(); 
                $("ul#main-nav li a.kingfisher").click(function(){  
                $(".curve").toggleClass("active").next();
            });
        });

    });//Close Main Function

    $(function() {
        $("#nav-box").hide();
        //run the currently selected effect

        function runEffect(){
            //get effect type from 
            var selectedEffect = $('#effectTypes').val();
            var options = {};
            //run the effect
            $("#nav-box").toggle("blind",options,500);
            $(this).toggleClass("active").next().slideToggle("slow");
        };

        //set effect from select menu value
        $("ul#main-nav li a.dsm").click(function() {
            runEffect();
            return false;
        });//Close Run Effect Function

        $(document).ready(function(){
            $("#nav-box").hide(); 
                $("ul#main-nav li a.dsm").click(function(){ 
                $(this).toggleClass("active").next();
            });
        });

        $(document).ready(function(){
            $("#nav-box").hide(); 
                $("ul#main-nav li a.dsm").click(function(){ 
                $(".curve").toggleClass("active").next();
            });
        });

    });//Close Main Function
    </script>

HTML是

<ul id="main-nav"><!--Open Main Navigation with JQuery Dropdown-->
            <li><a href="#" class="dsm">dsm Products</a></li>
            <li><a href="#" class="kingfisher">kingfisher Products</a></li>
            <li><a href="#" class="covertec" >covertec</a></li>
        </ul><!--Close Main Navigation-->

<div id="nav-box">
        <div class="kingfisher"> This is the content for the Kingfisher Products</div>
        <div class="dsm">This is the content for the DSM products</div>
    </div>

希望这更有意义，

父亲说，这正是我所需要的。在您的示例中，有一种方法可以在页面加载时隐藏所有div，然后选择要在哪个链接上单击？

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

3 个答案: