Показать и скрыть меню (где отображается только по одному за раз) - PullRequest
Новая
       29

Показать и скрыть меню (где отображается только по одному за раз)

0 голосов
/ 12 ноября 2010

У меня такая проблема, у меня есть меню, в котором есть скрытый суб-контент.Когда пользователь нажимает кнопку навигации, появляется скрытый контент.Эта часть в порядке, и все работает.

Что мне нужно знать, так это когда у меня есть один элемент навигации, показывающий скрытое содержимое.Если пользователь нажимает на следующий элемент навигации.Мне бы хотелось, чтобы другой скрытый контент исчез и появилось новое скрытое содержимое.

Мое вдохновение исходит от этого сайта.http://www.o2.co.uk/ если вы щелкнете по элементам навигационной стрелки.Любая помощь в этом была бы отличной.Кстати, все эффекты «Показать» и «Скрыть» работают.

Спасибо всем, кто может помочь.

Ответы [ 3 ]

0 голосов
/ 12 ноября 2010

Вам понадобится jQuery для этого, но ...

сначала мы привязываем функцию onClick к каждому элементу с помощью класса 'link', мы говорим, что onClick, что при щелчке скрыть все элементы с классом'hidable' и затем показывает div с идентификатором значения атрибута rel в ЭТОЙ ссылке.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>
0 голосов
/ 13 ноября 2010

Привет, 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>

Надеюсь, это немного больше смысла,

Fatherstorm, это именно то, что мне было нужно. В вашем примере есть способ, которым вы можете скрыть все элементы div при загрузке страницы, а затем выбрать, по какой ссылке нажать?

0 голосов
/ 12 ноября 2010

Я предполагаю, что вы делаете это в JavaScript.Извините, если я здесь слишком элементарен.

Ваша функция (если вы можете опубликовать ее, это было бы полезно) должна не только изменить атрибут отображения элемента, на который вы нажали, но и изменить его надисплей: нет;для любых других.

Поэтому, когда вы нажимаете на элемент навигации, ваш javascript изменяет атрибут отображения для этого списка на: блок или любой другой, а ТАКЖЕ изменяет все остальные списки на отображение: нет.Это немного грубой силы, так что вы также можете просто изменить любые другие, которые в данный момент являются чем-то иным, чем: ни один: ни один.

...