Javascript 使JS部分更简单_Javascript_Html_Switch Statement

Javascript 使JS部分更简单

javascript html

Javascript 使JS部分更简单,javascript,html,switch-statement,Javascript,Html,Switch Statement,所以，我有一个这样的网页。三个按钮在div之间切换，没有太多代码。但是如果我有15个div可以在两者之间切换，将会有更多的代码。有没有办法让我的JS代码更简单 <!DOCTYPE> <html> <head> <style type="text/css"> .info { width: 400px; height: 580px; margin: 40px

所以，我有一个这样的网页。三个按钮在div之间切换，没有太多代码。但是如果我有15个div可以在两者之间切换，将会有更多的代码。有没有办法让我的JS代码更简单

<!DOCTYPE>
<html>
<head>
    <style type="text/css">
        .info {
            width: 400px;
            height: 580px;
            margin: 40px;

            float: right;
        }

    </style>
</head>

<body>

    <div class="info" id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
        <p style="margin:0; color:red;">
            Red div
        </p>
    </div>

    <div class="info" id="swapper-second" style="display:none; border:2px dotted blue; padding:25px;">
        <p style="margin:0; color:blue;">
            Blue div
        </p>
    </div>

    <div class="info" id="swapper-third" style="display:none; border:2px solid green; padding:25px;">
        <p style="margin:0; color:green;">
            Green div
        </p>
    </div>

    <p style="text-align:center; font-weight:bold;">
        <a href="javascript:mred('swapper-first','swapper-second', 'swapper-third')">Red</a>
        <a href="javascript:mblue('swapper-first','swapper-second', 'swapper-third')">Blue</a>
        <a href="javascript:mgreen('swapper-first','swapper-second', 'swapper-third')">Green</a>
    </p>

    <script type="text/javascript">
        function mred(div1,div2,div3) {
            d1 = document.getElementById(div1);
            d2 = document.getElementById(div2);
            d3 = document.getElementById(div3);

            d1.style.display = "block";
            d2.style.display = "none";
            d3.style.display = "none";
        }

        function mblue(div1,div2,div3) {
            d1 = document.getElementById(div1);
            d2 = document.getElementById(div2);
            d3 = document.getElementById(div3);

            d1.style.display = "none";
            d2.style.display = "block";
            d3.style.display = "none"
        }

        function mgreen(div1,div2,div3) {
            d1 = document.getElementById(div1);
            d2 = document.getElementById(div2);
            d3 = document.getElementById(div3);

            d1.style.display = "none";
            d2.style.display = "none";
            d3.style.display = "block"
        }
    </script>
</body>
</html>


.info{
宽度：400px；
高度：580px；
利润率：40像素；
浮动：对；
}

红色分区


蓝色潜水艇


绿色分区



功能mred（第1部分、第2部分、第3部分）{
d1=document.getElementById（div1）；
d2=document.getElementById（div2）；
d3=document.getElementById（div3）；
d1.style.display=“块”；
d2.style.display=“无”；
d3.style.display=“无”；
}
函数mblue（第1部分、第2部分、第3部分）{
d1=document.getElementById（div1）；
d2=document.getElementById（div2）；
d3=document.getElementById（div3）；
d1.style.display=“无”；
d2.style.display=“块”；
d3.style.display=“无”
}
职能经理（部门1、部门2、部门3）{
d1=document.getElementById（div1）；
d2=document.getElementById（div2）；
d3=document.getElementById（div3）；
d1.style.display=“无”；
d2.style.display=“无”；
d3.style.display=“块”
}

在JQuery中，这是可能的

function swapDiv(id){
    $('.info').hide(); //hides everything
    $('#'+id).show(); //shows the div with the ID that was passed in
}

只需将“divs”类添加到所有div中。通过传递要保持可见的div的ID来调用函数

swapDiv（'swapper-first'）

在JQuery中，这是可能的

function swapDiv(id){
    $('.info').hide(); //hides everything
    $('#'+id).show(); //shows the div with the ID that was passed in
}

只需将“divs”类添加到所有div中。通过传递要保持可见的div的ID来调用函数

swapDiv（'swapper-first'）

在JQuery中，这是可能的

function swapDiv(id){
    $('.info').hide(); //hides everything
    $('#'+id).show(); //shows the div with the ID that was passed in
}

只需将“divs”类添加到所有div中。通过传递要保持可见的div的ID来调用函数

swapDiv（'swapper-first'）

在JQuery中，这是可能的

function swapDiv(id){
    $('.info').hide(); //hides everything
    $('#'+id).show(); //shows the div with the ID that was passed in
}

只需将“divs”类添加到所有div中。通过传递要保持可见的div的ID来调用函数

swapDiv（'swapper-first'）

未经测试，但应能工作：

HTML:

向href添加一个数据属性，其中包含要使其可见的div：

    <a href="javascript:divs()" data-value="swapper-third">Green</a>

JS:

函数divs（）{
var a=document.querySelectorAll（'div.info'）；
var b=this.getAttribute（'value'）；
对于（var i=0；i未测试，但应起作用：
HTML:
向href添加一个数据属性，其中包含要使其可见的div：
    <a href="javascript:divs()" data-value="swapper-third">Green</a>



JS:
函数divs（）{
var a=document.querySelectorAll（'div.info'）；
var b=this.getAttribute（'value'）；
对于（var i=0；i未测试，但应起作用：
HTML:
向href添加一个数据属性，其中包含要使其可见的div：
    <a href="javascript:divs()" data-value="swapper-third">Green</a>



JS:
函数divs（）{
var a=document.querySelectorAll（'div.info'）；
var b=this.getAttribute（'value'）；
对于（var i=0；i未测试，但应起作用：
HTML:
向href添加一个数据属性，其中包含要使其可见的div：
    <a href="javascript:divs()" data-value="swapper-third">Green</a>



JS:
函数divs（）{
var a=document.querySelectorAll（'div.info'）；
var b=this.getAttribute（'value'）；
对于（var i=0；i使用数组：
function mred(divs) {
   for (var i=0; i < divs.length; i++) {
     var div = document.getElementById(divs[i]);
     div.style.display = "block";
   }
}

功能mred（divs）{
对于（变量i=0；i
使用数组：
function mred(divs) {
   for (var i=0; i < divs.length; i++) {
     var div = document.getElementById(divs[i]);
     div.style.display = "block";
   }
}

功能mred（divs）{
对于（变量i=0；i
使用数组：
function mred(divs) {
   for (var i=0; i < divs.length; i++) {
     var div = document.getElementById(divs[i]);
     div.style.display = "block";
   }
}

功能mred（divs）{
对于（变量i=0；i
使用数组：
function mred(divs) {
   for (var i=0; i < divs.length; i++) {
     var div = document.getElementById(divs[i]);
     div.style.display = "block";
   }
}

功能mred（divs）{
对于（变量i=0；i
给你
<!DOCTYPE>
<html>
<head>
    <style type="text/css">
        .info {
            width: 400px;
            height: 580px;
            margin: 40px;

            float: right;
        }

    </style>
</head>

<body>

    <div class="info" id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
        <p style="margin:0; color:red;">
            Red div
        </p>
    </div>

    <div class="info" id="swapper-second" style="display:none; border:2px dotted blue; padding:25px;">
        <p style="margin:0; color:blue;">
            Blue div
        </p>
    </div>

    <div class="info" id="swapper-third" style="display:none; border:2px solid green; padding:25px;">
        <p style="margin:0; color:green;">
            Green div
        </p>
    </div>

    <p style="text-align:center; font-weight:bold;">
        <a href="javascript:mcolor('swapper-first')">Red</a>
        <a href="javascript:mcolor('swapper-second')">Blue</a>
        <a href="javascript:mcolor('swapper-third')">Green</a>
    </p>

    <script type="text/javascript">
    function mcolor(_id) {
        elements = document.getElementsByClassName('info')
        for(var i = 0; i < elements.length; i++) {
            if(elements[i].id == _id) {
                elements[i].style.display = 'block';
            } else {
                elements[i].style.display = 'none';
            }
        }
    }
    </script>
</body>
</html>


.info{
宽度：400px；
高度：580px；
利润率：40像素；
浮动：对；
}

红色分区


蓝色潜水艇


绿色分区



函数mcolor（_id）{
elements=document.getElementsByClassName（'info'）
对于（var i=0；i
给你
<!DOCTYPE>
<html>
<head>
    <style type="text/css">
        .info {
            width: 400px;
            height: 580px;
            margin: 40px;

            float: right;
        }

    </style>
</head>

<body>

    <div class="info" id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
        <p style="margin:0; color:red;">
            Red div
        </p>
    </div>

    <div class="info" id="swapper-second" style="display:none; border:2px dotted blue; padding:25px;">
        <p style="margin:0; color:blue;">
            Blue div
        </p>
    </div>

    <div class="info" id="swapper-third" style="display:none; border:2px solid green; padding:25px;">
        <p style="margin:0; color:green;">
            Green div
        </p>
    </div>

    <p style="text-align:center; font-weight:bold;">
        <a href="javascript:mcolor('swapper-first')">Red</a>
        <a href="javascript:mcolor('swapper-second')">Blue</a>
        <a href="javascript:mcolor('swapper-third')">Green</a>
    </p>

    <script type="text/javascript">
    function mcolor(_id) {
        elements = document.getElementsByClassName('info')
        for(var i = 0; i < elements.length; i++) {
            if(elements[i].id == _id) {
                elements[i].style.display = 'block';
            } else {
                elements[i].style.display = 'none';
            }
        }
    }
    </script>
</body>
</html>


.info{
宽度：400px；
高度：580px；
利润率：40像素；
浮动：对；
}

红色分区


蓝色潜水艇


绿色分区



函数mcolor（_id）{
元素=document.getElementsByC