Question

如何让我的切换按钮不仅可以将视图中的名称更改为隐藏，还可以显示我在div标签中的表格？

我的剧本目前有以下内容：

   <script type = "text/javascript">
function buttonToggle(where,pval,nval)
{
        where.value = (where.value == pval) ? nval : pval;

}
</script>

这是按钮的代码：

<input type="button" name="button1" id="nextbt" value="View " onclick="buttonToggle(this,'View ','Hide ')">

Answer 1

如果您可以使用jQuery，那将非常简单：

$('#nextbt').click(function() {
    if ($(this).attr('value') == 'show') {
        $(this).attr('value', 'hide');
        $('#myotherdiv').slideDown();
    } else {
        $(this).attr('value', 'show');
        $('#myotherdiv').slideUp();
    }

    // or if you don't care about changing the button text, simply:
    $('#myotherdiv').slideToggle();
});

更多信息：http://api.jquery.com/slideToggle/

Answer 2

类似的东西：

function buttonToggle(where,pval,nval) {
    var display =  where.value === nval ? 'none' : 'block'; // or 'table'
    document.getElementById('yourTableId').style.display = display;
    where.value = (where.value == pval) ? nval : pval;
}

或更好：

function buttonToggle(source, target, show_val, hide_val) {
    var display =  source.value === hide_val ? 'none' : 'block'; // or 'table'
    target.style.display = display;
    source.value = (source.value == show_val) ? hide_val : show_val;
}

而不是内联添加点击处理程序，请使用JavaScript：

document.getElementById('nextbt').onclick = (function() {
    var table = document.getElementById('yourTableId');
    return function() {
        toggleButton(this, table, 'View', 'Hide');
    };
}());

Answer 3

使用jQuery。见demo http://jsfiddle.net/nBJXq/2/

Answer 4

假设您将要显示/隐藏的表格的id添加为按钮的rel属性：

<input type="button" name="button1" id="nextbt" 
       rel="myTable" value="View " 
       onclick="buttonToggle(this,'View ','Hide ')">

<table id="myTable">
    <tr>
        <td>myTable</td>
    </tr>
</table>

然后，您可以将以下内容添加到buttonToggle函数中：

function buttonToggle(where, pval, nval) {
    var table = document.getElementById(where.attributes.rel.value);
    where.value = (where.value == pval) ? nval : pval;
    table.style.display = (table.style.display == 'block') ? 'none' : 'block';
}

See example.

Answer 5

您需要将div的style.visible更改为visible或hidden，和/或将style.display设置为block或none

请参阅：http://w3schools.com/css/css_display_visibility.asp

javascript切换按钮以打开和关闭div

5 个答案: