Javascript 正在寻找隐藏和显示一些div的好方法_Javascript_Html_Css

Javascript 正在寻找隐藏和显示一些div的好方法

javascript html css

Javascript 正在寻找隐藏和显示一些div的好方法,javascript,html,css,Javascript,Html,Css,大家好，我想隐藏一些div，并在单击特定链接时显示其他div 其实我是这样做的： <html> <head> <script> function loadA(){ document.getElementById("A").style.display="block"; document.getElementById("B").style.displa

大家好，我想隐藏一些div，并在单击特定链接时显示其他div

其实我是这样做的：

<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>


函数loadA（）{
document.getElementById（“A”）.style.display=“block”；
document.getElementById（“B”）.style.display=“无”；
document.getElementById（“C”）.style.display=“无”；
document.getElementById（“D”）.style.display=“无”；
}
函数loadB（）{
document.getElementById（“A”）.style.display=“无”；
document.getElementById（“B”）.style.display=“block”；
document.getElementById（“C”）.style.display=“无”；
document.getElementById（“D”）.style.display=“无”；
}
函数loadC（）{
document.getElementById（“A”）.style.display=“无”；
document.getElementById（“B”）.style.display=“无”；
document.getElementById（“C”）.style.display=“block”；
document.getElementById（“D”）.style.display=“无”；
}
函数loadD（）{
document.getElementById（“A”）.style.display=“无”；
document.getElementById（“B”）.style.display=“无”；
document.getElementById（“C”）.style.display=“无”；
document.getElementById（“D”）.style.display=“block”；
}

这是我的工作，但正如你所看到的，这不是一个好的做法，当然还有其他方法比这更好，你能告诉我，请

您可以创建一个函数并对每个元素重复使用它：

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";
}

并将正确的id传递到每个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>

以下是您应该怎么做。无内联javascript，使用eventListener处理单击事件，并将所有元素包装到一个类中，从而大大减少了编写和维护的代码：

JS:

函数divLoader（e）{
var hide=document.getElementsByClassName（“hideAndShow”）；
对于（var i=0；i在类似重复代码的情况下，可以使用一种称为“抽象”的通用技术。其主要思想是将通用代码转换为单个函数的参数，在您的情况下，它将是：
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";
}

不过，这仍然有点多余，对于较大的菜单和显示多个链接，您可以执行以下操作
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;
    }
 }

函数loadByIDs（ids）{
var links=document.getElementsByTagName（“a”）；
对于（变量i=0；i

当您有太多的链接并且希望一次显示多个链接时（因此您需要传入一个数组），这将更好地工作
注意：如果使用Jquery，只需使用.each（）函数即可摆脱第一个for循环
希望这会有所帮助！
我认为在您的情况下，最好的做法是定义一个通用函数，该函数可以工作，但是具有特定类的链接数量在我的示例中，该类是链接
，请查看
现在，您的脚本将与添加在div中的动态链接一起工作，您只需添加html而不必触摸js即可检测到更改
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>

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";
}



JS:
<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>

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";
}

load=函数（e）{
//选择所有链接
var links=document.getElementsByClassName（'link'）；
//隐藏所有链接
对于（i=0；i

希望这是一个没有javascript的解决方案：

.container>div{
显示：无
}
.container>div:目标{
显示：块
}

内容
B含量
C含量
D内容
HTML
}))
这是你的电话号码
如果可见性不起作用，只需将“可见性”关键字更改为“可见”，并将其隐藏为“隐藏”
还有一件事，你不应该为每个div写函数。你能做什么呢？只需要传递一个div的id，你想显示和隐藏其他div。见下文
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";
    }

}

功能触发器（id）
{
var alldiv={“A”、“B”、“C”、“D”}；
对于（i=0；iYou可能最好在第一次显示所有div时选择唯一的一个。如何选择唯一的一个？将其放在正文末尾的脚本标记中：loadDiv（“a”）；或任何您希望由default加载的元素，或将dislpay:none作为默认元素
$(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");
});

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";
}

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";
    }

}