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

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

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

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

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

сначала мы привязываем функцию onClick к каждому элементу с классом «ссылка», мы говорим, что 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>

Привет, ОтецШторм и 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 при загрузке страницы, а затем выбрать, по какой ссылке щелкнуть?