Question

嗨我只想点击一个合适的按钮后，我只想显示我的3个div中的一个但是没有任何事情可以帮助我吗？感谢。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CS:GO Team Hub</title>
    <style type="text/css">

        html{
            width:100%;
            height:100%;
        }

        body { /* Used to set the size of the webpage so you don't get 2 pictures */
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        p {
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            font-size: 1em;
        }

        h1 {
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            font-size: 2em;
        }

        .center {
            text-align: center;
            width: 100%;
            border:1px solid #8AC007;

        }

        .empty_spc{
            width: 100%;
            border:1px solid #8AC007;
            padding-top: 3%;
        }

        .container{
            width: 50%;
            height: 10%;
            border: 1px solid #090dc0;
            padding: 1% 25% 1% 25%;
        }

        .same_row_div{
            width: 26%;
            height: 100%;
            float: left;
            display: block;
            margin: 0 auto;
            text-align: center;
            border:1px solid #8AC007;
        }

        button{
            height: 100%;
            width: 100%;
            vertical-align: middle;
            background-color: darkred;
            margin:auto;
            border-color: #bc3315;
        }

        input:focus{
            outline: none;
        }

        a{
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            font-size: 2em;
            color:white;
        }

        .settings_block{
            height: 30% ;
            width: 70%;
            padding: 5% 15%;
            border:1px solid #8AC007;
        }

    <script type="text/javascript">

        function toggle_visibility(id) {
            var e = document.getElementById(id);

            switch (e){
                case e='bo1s':
                    e.style.display = 'block';
                    'bo3s'.style.display = 'none';
                    'bo5s'.style.display = 'none';
                    break;
                case e = 'bo3s':
                    e.style.display = 'block';
                    'bo1s'.style.display = 'none';
                    'bo5s'.style.display = 'none';
                    break;
                case e = 'bo5s':
                    e.style.display = 'block';
                    'bo1s'.style.display = 'none';
                    'bo3s'.style.display = 'none';
                    break;
            }
        }
    </script>
</head>
<body background="OverpB_blur.png" >
        <div class="empty_spc"></div>
        <div class="center">
            <h1 align="center">Choose Your Veto Settings</h1>
        </div><br>
        <br>
        <div class="container" style="height: 8%;">
            <div class="same_row_div" style="padding-right: 10%"><button type="button" onclick="toggle_visibility('bo1s')"><a><b>BO1</b></a></button></div>
            <div class="same_row_div"><button type="button" onclick="toggle_visibility('bo3s')"><a><b>BO3</b></a></button></div>
            <div class="same_row_div" style="padding-left: 10%"><button type="button" onclick="toggle_visibility('bo5s')"><a><b>BO5</b></a></button></div>
        </div>

        <div class="settings_block" id="bo1s" style="display: none;">test1</div>
        <div class="settings_block" id="bo3s" style="display: none;">test2</div>
        <div class="settings_block" id="bo5s" style="display: none;">test3</div>


</body>
</html>

＆＃13;

正如你所看到我试图显示正确的div并隐藏其他两个但由于某种原因它不起作用，也许我的开关启动有问题？

Answer 1

首先，您错过了</style>代码。

您的JavaScript不起作用。它有几个问题：

case e='bo1s':语法不正确。您希望它看起来像case 'bo1s':。
您正在评估元素并对其进行测试字符串。而是让它读取switch (id) {然后你进行测试 id并将其与字符串进行比较。
在每个案例中你都在尝试使用他们的id处理元素。你需要这些也是getElementById。

这是你的代码，工作。为简洁起见，省略了样式。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CS:GO Team Hub</title>
    <style type="text/css">
        /* ignoring your styles */
    </style>

    <script type="text/javascript">

        function toggle_visibility(id) {
            var e = document.getElementById(id);

            switch (id){
                case 'bo1s':
                    e.style.display = 'block';
                    document.getElementById('bo3s').style.display = 'none';
                    document.getElementById('bo5s').style.display = 'none';
                    break;
                case 'bo3s':
                    e.style.display = 'block';
                    document.getElementById('bo1s').style.display = 'none';
                    document.getElementById('bo5s').style.display = 'none';
                    break;
                case 'bo5s':
                    e.style.display = 'block';
                    document.getElementById('bo1s').style.display = 'none';
                    document.getElementById('bo3s').style.display = 'none';
                    break;
            }
        }
    </script>
</head>
<body background="OverpB_blur.png" >
        <div class="empty_spc"></div>
        <div class="center">
            <h1 align="center">Choose Your Veto Settings</h1>
        </div><br>
        <br>
        <div class="container" style="height: 8%;">
            <div class="same_row_div" style="padding-right: 10%"><button type="button" onclick="toggle_visibility('bo1s')"><a><b>BO1</b></a></button></div>
            <div class="same_row_div"><button type="button" onclick="toggle_visibility('bo3s')"><a><b>BO3</b></a></button></div>
            <div class="same_row_div" style="padding-left: 10%"><button type="button" onclick="toggle_visibility('bo5s')"><a><b>BO5</b></a></button></div>
        </div>

        <div class="settings_block" id="bo1s" style="display: none;">test1</div>
        <div class="settings_block" id="bo3s" style="display: none;">test2</div>
        <div class="settings_block" id="bo5s" style="display: none;">test3</div>


</body>
</html>

＆＃13;

Answer 2

将您的switch语句更改为switch (e.id) {

当您将HTML元素与字符串进行比较时，您需要访问id属性并将其与字符串进行比较。

Answer 3

您的JavaScript有几件事情不稳定。这是一个工作JSFiddle的链接：

https://jsfiddle.net/qyh1uyk3/11/

this.toggle_visibility = function toggle_visibility(id) {
    var e = document.getElementById(id);

    switch (e.id){
        case e.id = 'bo1s':
            e.style.display = 'block';
            $('#bo3s').css('display', 'none');
            $('#bo5s').css('display', 'none');
            break;
        case e.id = 'bo3s':
            e.style.display = 'block';
            $('#bo1s').css('display', 'none');
            $('#bo5s').css('display', 'none');
            break;
        case e.id = 'bo5s':
            e.style.display = 'block';
            $('#bo1s').css('display', 'none');
            $('#bo3s').css('display', 'none');
            break;
    }
};

我发现您的功能未被点击事件触发。在这个例子中，我应该指出我正在使用JQuery。

Answer 4

这应解决</style>问题和您的切换问题。您可能应该看看您的CSS，因为按钮似乎被切断了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CS:GO Team Hub</title>
    <style type="text/css">

        html{
            width:100%;
            height:100%;
        }

        body { /* Used to set the size of the webpage so you don't get 2 pictures */
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        p {
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            font-size: 1em;
        }

        h1 {
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            font-size: 2em;
        }

        .center {
            text-align: center;
            width: 100%;
            border:1px solid #8AC007;

        }

        .empty_spc{
            width: 100%;
            border:1px solid #8AC007;
            padding-top: 3%;
        }

        .container{
            width: 50%;
            height: 10%;
            border: 1px solid #090dc0;
            padding: 1% 25% 1% 25%;
        }

        .same_row_div{
            width: 26%;
            height: 100%;
            float: left;
            display: block;
            margin: 0 auto;
            text-align: center;
            border:1px solid #8AC007;
        }

        button{
            height: 100%;
            width: 100%;
            vertical-align: middle;
            background-color: darkred;
            margin:auto;
            border-color: #bc3315;
        }

        input:focus{
            outline: none;
        }

        a{
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            font-size: 2em;
            color:white;
        }

        .settings_block{
            height: 30% ;
            width: 70%;
            padding: 5% 15%;
            border:1px solid #8AC007;
        }
    </style>
    <script type="text/javascript">

        function toggle_visibility(id) {
            var e = document.getElementById(id);

            switch (e.id){
                case e.id ='bo1s':
                    e.style.display = 'block';
                    document.getElementById('bo3s').style.display = 'none';
                    document.getElementById('bo5s').style.display = 'none';
                    break;
                case e.id = 'bo3s':
                    e.style.display = 'block';
                    document.getElementById('bo1s').style.display = 'none';
                    document.getElementById('bo5s').style.display = 'none';
                    break;
                case e.id = 'bo5s':
                    e.style.display = 'block';
                    document.getElementById('bo1s').style.display = 'none';
                    document.getElementById('bo3s').style.display = 'none';
                    break;
            }
        }
    </script>
</head>
<body background="OverpB_blur.png" >
        <div class="empty_spc"></div>
        <div class="center">
            <h1 align="center">Choose Your Veto Settings</h1>
        </div><br>
        <br>
        <div class="container" style="height: 8%;">
            <div class="same_row_div" style="padding-right: 10%"><button type="button" onclick="toggle_visibility('bo1s')"><a><b>BO1</b></a></button></div>
            <div class="same_row_div"><button type="button" onclick="toggle_visibility('bo3s')"><a><b>BO3</b></a></button></div>
            <div class="same_row_div" style="padding-left: 10%"><button type="button" onclick="toggle_visibility('bo5s')"><a><b>BO5</b></a></button></div>
        </div>

        <div class="settings_block" id="bo1s" style="display: none;">test1</div>
        <div class="settings_block" id="bo3s" style="display: none;">test2</div>
        <div class="settings_block" id="bo5s" style="display: none;">test3</div>


</body>
</html>

Answer 5

在标签前关闭标签，然后尝试：

<script type="text/javascript">

    function toggle_visibility(id) {
        var e = document.getElementById(id);

        switch (e.id){
            case 'bo1s':
                e.style.display = 'block';
                document.getElementById('bo3s').style.display = 'none';
                document.getElementById('bo5s').style.display = 'none';
                break;
            case 'bo3s':
                e.style.display = 'block';
                document.getElementById('bo1s').style.display = 'none';
                document.getElementById('bo5s').style.display = 'none';
                break;
            case 'bo5s':
                e.style.display = 'block';
                document.getElementById('bo1s').style.display = 'none';
                document.getElementById('bo3s').style.display = 'none';
                break;
        }
    }
</script>

HTML div切换可见性不起作用

5 个答案: