Question

我一直在尝试默认加载DIV（dpara），然后允许用户根据他们按下的按钮切换DIV。

在页面加载时 - dpara可见，但dtab和ddl不可用。

如果用户选择dtab，例如dpara被隐藏，dtab变为可见，ddl仍然隐藏。

但是，由于我已经更新了我的代码，所以这似乎不起作用：

<script type='text/javascript'>
        function arrange(div_id) {
            // First make all the divs hidden...
            divs = document.getElementsByTagName('div');
            for( var i = 0; i < divs.length; i++ ) {
                divs[i].style.display = 'none';
            }

            // Now make the one we want to be visible visible...
            document.getElementById(div_id).style.display = 'block';
        }
    </script>
    <form>
        <input type='button' value='dpara' onclick='arrange(this.value);' />
        <input type='button' value='dtab' onclick='arrange(this.value);' />
        <input type='button' value='ddl' onclick='arrange(this.value);' />
    </form>
    <div id='dpara'>
        123
    </div>

    <div id='dtab'>
        456
    </div>

    <div id='ddl'>
        789
    </div>

除此之外 var visibleDiv 意味着存储我正在通过的div的id - 但是在警告时它会返回 [object HTTPInputElement] 。我错过了几个步骤吗？这是下面的mu新代码：

    <script type='text/javascript'>
var visibleDiv;

function arrange(div) {
    // Cache the passed in 'div' as the currently visible one
    visibleDiv = div;

    alert(visibleDiv);

    // First make all the divs hidden...
    var divs = document.getElementsByTagName('div'),
        i,
        len;

    for (i = 0, len = divs.length; i < len; i++) {
        divs[i].style.display = 'none';
    }

    // Now make the one we want to be visible visible...
    visibleDiv.style.display = 'block';
}
    </script>
    <form>
        <input type='button' value='dpara' onclick='arrange(this);' />
        <input type='button' value='dtab' onclick='arrange(this);' />
        <input type='button' value='ddl' onclick='arrange(this);' />
    </form>
    <div id='dpara'>123
    </div>

    <div id='dtab' style='display: none'>456
    </div>

    <div id='ddl' style='display: none'>789
    </div>

Answer 1

在第二次尝试中，您不再传递this.value。您只是传递this，这是对input元素的引用（顺便说一句是HTMLInputElement，而不是HTTPInputElement）。

但是，将其更改回this.value仍然无效，因为这一行：

 visibleDiv.style.display = 'block';

我建议将参数更改回this.value并将上述行更改为：

 document.getElementById(visibleDiv).style.display = 'block';

Answer 2

在你的第二个例子中，onclick处理程序采用'this'，而不是'this.value'。这就是为什么当你警告它的值时你得到一个HTTPInputElement。

Answer 3

在您的第二个示例中尝试更改

onclick='arrange(this)';

到此

onclick='arrange(this.value)';

Answer 4

在新代码的上下文中，

'this'是对已经点击的HTML输入元素的引用，而不是对实际div的引用，这是我想要的。

Answer 5

试试这个更新版本：

var visibleDiv;

function arrange(div) {
    // Cache the passed in 'div' as the currently visible one
    visibleDiv = document.getElementById(div.value);

    // First make all the divs hidden...
    var divs = document.getElementsByTagName('div'),
        i,
        len;

    for (i = 0; i < divs.length; i++) {
        divs[i].style.display = 'none';
    }

    // Now make the one we want to be visible visible...
    visibleDiv.style.display = 'block';
}

JS Fiddle demo

问题在于您将DOM节点传递给函数，而您需要来自该节点的value。为了解决这个问题，您可以使用：onclick="arrange(this.value);"或者，正如我选择的那样，将DOM节点传递给函数，然后在函数中找到值。

其次，您假设JavaScript会在不调用div方法的情况下找到正确的document.getElementById()元素，我已经更正了该方法，将document.getElementById(div.value)返回的DOM节点分配给变量visibleDiv。我还删除了alert()。但这不是问题，只是为了让它看起来好一点。

Answer 6

你的第一个例子适合我。我用过铬。也许我不理解这个问题。当我运行你的第一个例子时，我看到所有三个div，然后点击任何按钮只显示预期的div。

Answer 7

处理此问题的一种快速方法是确保样式位于div元素上，并将“this”而非“this.value”传递给函数。然后你可以使用这个javascript。

function clicked(elm) {
    var tabs = document.getElementsByTagName('div');
    for(var i=0;i<tabs.length;++i) {
        if(tabs[i].style.display == "block") {
            tabs[i].style.display = "none";
        }
    }
    document.getElementById(elm.value).style.display = "block";
}

你的div应该是这样的：

<div id="dpara" style="display:block">
    First Content
</div>

<div id="dtab" style="display:none">
    Second Content
</div>

<div id="ddl" style="display:none">
    Third Content
</div>

你的按钮：

<input type="button" onclick="clicked(this)" value="dpara" />
<input type="button" onclick="clicked(this)" value="dtab" />
<input type="button" onclick="clicked(this)" value="ddl" />

检索DIV的ID失败

7 个答案: