0

我试图在单击<td>表格时隐藏/显示 div。表格包含两个<div>s，点击主账户持有人时考虑<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';
  }  }
};

谁能给我一个如何做到这一点的想法？

4

3 回答 3

2

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

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

如果您浏览 jquery API，您可以使用很多效果，例如淡出和其他东西。

于 2013-12-02T00:23:11.587 回答
2

您应该留意这个很棒的教程页面： http ://www.w3schools.com/jquery/jquery_hide_show.asp 。

W3School 是一个很棒的教程网站（从我的角度来看是最好的），这个页面向您展示了一个使用 JQuery 框架的示例，它是您页面中“必须包含”的源，因为它为常见的（以及更多）提供了非常好的帮助复杂）Javascript函数。 http://jquery.com/ 最好的问候

于 2013-04-26T06:19:41.787 回答
1

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

http://jqueryui.com/accordion/

于 2013-04-26T06:18:18.773 回答