Question

我在点击表格中的<td>时试图隐藏/显示div。表格包含两个<div>，并在点击主帐户持有人<td>时考虑应显示第一个div而另一个div处于隐藏状态。对于授权重新排序<td>，应显示相应的div。

我的HTML

<div id="authreport">
 <table width="270">
    <tr>
        <td>First name:</td>
    </tr>
    <tr>
        <td>Last name:</td>
    </tr>
    <tr>
        <td>Mobile phone:</td>
    </tr>
    <tr>
        <td>Email:</td><td>
    <tr>
        <td>Password:</td>
    </tr>
 </table>
</div>

<div id="mainacc">
    <table>
        <tr>
            <td colspan="2"><h3>Work details</h3></td>
        </tr>
        <tr>
            <td>Organisation:</td>
        </tr>
        <tr>
            <td>Industry Type:</td>
        <tr>
            <td>Street:</td>
        </tr>
        <tr>
            <td>Postcode:</td>
        </tr>
        <tr>
            <td>Country:</td>
        </tr>
    </table>
</div>

我的JavaScript是

function authorised_reporter(auth){
var button = document.getElementById('auth')

auth.onclick = function() {
var div = document.getElementById('authreport');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
  }  }
};

任何人都可以告诉我如何做到这一点吗？

Answer 1

你应该关注这个很棒的教程页面： http://www.w3schools.com/jquery/jquery_hide_show.asp

W3School是一个很棒的教程网站（从我的角度来看是最好的），这个页面向您展示了一个使用JQuery Framework的例子，它在您的页面中是“必须包含”的来源，因为它为共同提供了非常好的帮助（而且更复杂）Javascript函数。 http://jquery.com/ .Best Regards

Answer 2

如果使用JQuery，则非常简单。

$('#DivID').click(function(){
    //You can use show(), hide(), or toggle()        
    $('#DivID').toggle();
});

如果您浏览jquery API，可以使用很多效果，例如淡出和填充。

Answer 3

如果我理解正确，那么您要实现的目标就像 accordion 。你可能想看到这个。

http://jqueryui.com/accordion/

如何在td元素上执行onclick时显示/隐藏div

3 个答案: