javascript - looking for a good pratice to hide and display some divs - Stack Overflow

IT技术

更新时间：2025-03-100

admin管理员组
文章数量:1294322

Hello everybody I would like to hide some divs and display others when I click on a specifiks links.

Actually I did like this :

<html>
    <head>
        <script>

            function loadA(){
                document.getElementById("A").style.display="block";
                document.getElementById("B").style.display="none";
                document.getElementById("C").style.display="none";
                document.getElementById("D").style.display="none";

            }

            function loadB(){
                document.getElementById("A").style.display="none";
                document.getElementById("B").style.display="block";
                document.getElementById("C").style.display="none";
                document.getElementById("D").style.display="none";

            }
            function loadC(){
                document.getElementById("A").style.display="none";
                document.getElementById("B").style.display="none";
                document.getElementById("C").style.display="block";
                document.getElementById("D").style.display="none";

            }
            function loadD(){
                document.getElementById("A").style.display="none";
                document.getElementById("B").style.display="none";
                document.getElementById("C").style.display="none";
                document.getElementById("D").style.display="block";

            }

        </script>
    </head>

    <body>
        <div class="menu">
            <a href="#" onclick="loadA()">A</a>
            <a href="#" onclick="loadB()">B</a>
            <a href="#" onclick="loadC()">C</a>
            <a href="#" onclick="loadD()">D</a>
        </div>
    </body>

</html>

This is work with me but as you see it's not a good practice and sure there is another way better than this , can you show me please !

Hello everybody I would like to hide some divs and display others when I click on a specifiks links.

Actually I did like this :

<html>
    <head>
        <script>

            function loadA(){
                document.getElementById("A").style.display="block";
                document.getElementById("B").style.display="none";
                document.getElementById("C").style.display="none";
                document.getElementById("D").style.display="none";

            }

            function loadB(){
                document.getElementById("A").style.display="none";
                document.getElementById("B").style.display="block";
                document.getElementById("C").style.display="none";
                document.getElementById("D").style.display="none";

            }
            function loadC(){
                document.getElementById("A").style.display="none";
                document.getElementById("B").style.display="none";
                document.getElementById("C").style.display="block";
                document.getElementById("D").style.display="none";

            }
            function loadD(){
                document.getElementById("A").style.display="none";
                document.getElementById("B").style.display="none";
                document.getElementById("C").style.display="none";
                document.getElementById("D").style.display="block";

            }

        </script>
    </head>

    <body>
        <div class="menu">
            <a href="#" onclick="loadA()">A</a>
            <a href="#" onclick="loadB()">B</a>
            <a href="#" onclick="loadC()">C</a>
            <a href="#" onclick="loadD()">D</a>
        </div>
    </body>

</html>

This is work with me but as you see it's not a good practice and sure there is another way better than this , can you show me please !

Share Improve this question edited Aug 3, 2015 at 17:03 baao 73.3k18 gold badges150 silver badges207 bronze badges asked Aug 2, 2015 at 15:37 user5059264

3 You might be better off on codereview.stackexchange. – Paulie_D Commented Aug 2, 2015 at 15:47

Add a ment |

7 Answers 7

Sorted by: Reset to default 6

A solution without javascript:

.container > div{
  display:none
}

.container > div:target{
  display:block
}

<div class="menu">
    <a href="#A" >A</a>
    <a href="#B" >B</a>
    <a href="#C" >C</a>
    <a href="#D" >D</a>
</div>
<div class="container">
  <div id="A" >A content</div>
  <div id="B" >B content</div>
  <div id="C" >C content</div>
  <div id="D" >D content</div>
</div>

https://developer.mozilla/en-US/docs/Web/CSS/%3Atarget
https://css-tricks./css3-tabs/

You can create one function and reuse it for each element:

function loadDiv(id){
    document.getElementById("A").style.display="none";
    document.getElementById("B").style.display="none";
    document.getElementById("C").style.display="none";
    document.getElementById("D").style.display="none";
    document.getElementById(id).style.display="block";
}

And pass the correct id into each onclick:

<div class="menu">
    <a href="#" onclick="loadDiv('A')">A</a>
    <a href="#" onclick="loadDiv('B')">B</a>
    <a href="#" onclick="loadDiv('C')">C</a>
    <a href="#" onclick="loadDiv('D')">D</a>
</div>

Here's how you should do it. No inline javascript, handling click events with an eventListener and wrapping all elements together with a class, making it much less code to write and maintain:

JS:

function divLoader(e){
    var hide = document.getElementsByClassName("hideAndShow");
    for (var i = 0; i<hide.length;i++) {
        hide[i].style.display="none";
    }
    document.getElementById(e.target.getAttribute('data-link')).style.display="block";
}

var anchors = document.querySelectorAll('.menu > a');
for (var i = 0; i<anchors.length; i++) {
    anchors[i].addEventListener('click',divLoader);
}

HTML:

<div class="menu">
    <a href="#" data-link="A">A</a>
    <a href="#" data-link="B">B</a>
    <a href="#" data-link="C">C</a>
    <a href="#" data-link="D">D</a>
</div>
<div id="A" class="hideAndShow" style="display:none;">A</div>
<div id="B" class="hideAndShow" style="display:none;">B</div>
<div id="C" class="hideAndShow" style="display:none;">C</div>
<div id="D" class="hideAndShow" style="display:none;">D</div>

In such cases where you have similar repetitive code you can use a mon technique called "Abstraction". The main idea is the turn the mon code into parameters of a single function in your case it would be:

function loadByID(id){
       document.getElementById("A").style.display="none";
       document.getElementById("B").style.display="none";
       document.getElementById("C").style.display="none";
       document.getElementById("D").style.display="none";
       document.getElementById(id).style.display="block";
}

However this is also still a little bit redundant, for larger menus and displaying multiple links you can do something like

function loadByIDs(ids){
    var links = document.getElementsByTagName("a");
    for(var i = 0; i < links.length; i++){
         document.getElementById(links[i].id).style.display = none;
    }

    for each(var id in ids){
         document.getElementById(id).style.display = block;
    }
 }

This will work much better when you have too much links and want to display more than one link at a time (so you will need to pass in an array)

Note: If you are using Jquery you can just use .each() function to get rid of the first for loop

Hope this helps!

I think the best practice in your case is to define a general function that work however the number of links with specific class in my example the class is link, take a look at Working Fiddle.

Now your script will work with dynamic links added in div, you have just to add html without touching the js will detect change.

HTML :

<div class="menu">
    <a href="#" class="link" onclick="load(event)">A</a>
    <a href="#" class="link" onclick="load(event)">B</a>
    <a href="#" class="link" onclick="load(event)">C</a>
    <a href="#" class="link" onclick="load(event)">D</a>
</div>

JS :

load = function(e){
    //select all links
    var links = document.getElementsByClassName('link');

    //Hide all the links
    for (i = 0; i < links.length; i++) { 
        links[i].style.display = "none";
    }

    //Show clicked link    
    e.target.style.display = "block";
}

Hope this make sens.

HTML

<body>
    <div id="main">     
        <ul id="nav">
            <li><a href="#" id="show_home">Home</a></li>
            <li><a href="#" id="show_about">About Us</a></li>
        </ul>
        <div id="container">
            <div id="wrapper">
                <div class="content">  
                    <div id="menu_home">
                        <h2>Menu 1</h2>
                    </div>
                    <div id="menu_about">
                        <h2>Menu 2</h2>                
                    </div>
                </div><!--content-->
            </div><!--wrapper-->        
        </div><!--container-->    
    </div><!-- main-->
</body>

JS

$(document).ready(function(){
$("#menu_home").slideUp("fast");
$("#menu_about").slideUp("fast");

$("#menu_home").show();
$("#nav a").click(function(){
  var id =  $(this).attr('id');
  id = id.split('_');
  $(".content div").slideUp("fast");; 
  $(".content #menu_"+id[1]).slideToggle("fast");
});

});

Here is the example

function loadA()
{

    document.getElementById("A").style.visiblity="show";
    document.getElementById("B").style.visiblity="hide";
    document.getElementById("C").style.visiblity="hide";
    document.getElementById("D").style.visiblity="hide";
}

if visibility dont work,just change the visibility keyword with visible and hide with hidden.

and one more thing,u should not write function for each div..what can u do just pass id of a div which u want to show and hide others..see below

function trigger(id)
{

    var alldiv={"A","B","C","D"};
    for(i=0;i<alldiv.length;i++)
    {
         if(alldiv[i]==id)
             document.getElementById(id).style.visiblity="show";
         else
             document.getElementById(alldiv[i]).style.visiblity="hide";
    }

}

本文标签： javascriptlooking for a good pratice to hide and display some divsStack Overflow

版权声明：本文标题：javascript - looking for a good pratice to hide and display some divs - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1741598605a2387560.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - looking for a good pratice to hide and display some divs - Stack Overflow

7 Answers 7

更多相关文章