Question

我试图将表格的宽度从100％更改为60％，并在用户点击特定href时显示div。这是我的相关代码：

<table id="pageTable" width="100%">
...
...
<td><a href="#" onclick="shrink();">ABC</a></td>          
...
...
</table>
<div id="#xyz">

#xyz的CSS有display:none

使用Javascript：

function shrink()
    {
    curr = document.getElementById('pageTable').width;  
    curr = (curr== '100%'?'60%':'100%');
    }

我在使用Jquery .show函数时遇到了麻烦。我的意思是div我应该应用它。此外，表的宽度没有变化。

Answer 1

请不要内联javascript。

另外，在html中你不需要id中的＃，那就是纯粹的jquery和css。这是正确的：<div id="xyz"></div>

<table id="pageTable" width="100%">
...
...
<td><a href="#" class="shrinky-dinky">ABC</a></td>          
...
...
</table>

<div id="xyz">XYZ</div>

JS：

$(".shrinky-dinky").click( function() {
$("#pageTable").width( "60%" );
$("#xyz").show();
});

示例：http://jsfiddle.net/drpqT/1/

关于不引人注目的JavaScript的文档：http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

UPDATE：我们已经确定此表正在加载AJAX，因此需要.live函数。

http://jsfiddle.net/drpqT/2/

更多关于.live http://api.jquery.com/live/

Answer 2

宽度没有变化，因为您只更改curr变量，而不是将其分配回表格宽度。所以试试这个：

function shrink() {
    curr = document.getElementById('pageTable').width;  
    curr = (curr== '100%'?'60%':'100%');
    document.getElementById('pageTable').width = curr;

    document.getElementById('#xyz').style.display = "block";
}

http://jsfiddle.net/q9X62/

或者使用jQuery我会这样做：

$(document).ready(function() {
    $("#shrinkLink").click(function() {
        $("#pageTable").toggleClass("shrunk");
        $("#xyz").toggle();
    });
});

在样式表中包含以下内容：

#pageTable { width : 100%; }
#pageTable.shrunk { width : 60%; }

演示：http://jsfiddle.net/q9X62/1/

添加和删除类来改变宽度比将宽度直接放在JS中要简洁。

Answer 3

如果你正在使用jQuery，那么你可以采用更好的方式来做你想做的事情：

$("#yourLink").click(function() {
    $("#xyz").show(); /* Show the div whose id is "xyz" */
    $("#pageTable").width("60%"); /* Now change the width of the table to 60% */
});

以下是演示：http://jsfiddle.net/BenjaminRH/Cq2CH/

另外，只有几个风格点：

不要使用内联Javascript。使用jQuery的click（）函数并将其绑定到链接，而不是将函数放在onClick属性
HTML中的ID不需要哈希符号（＃）。只需在div id中使用“xyz”。

Answer 4

这应该很简单。这是Html＆amp;执行扩展的JavaScript代码，并隐藏/显示。

<html>
<head>
    <title>Testing, what can be tested.</title>
    <script type="text/javascript" language="javascript">
        function shrink() {
            var curr = document.getElementById('pageTable').width;
            // This code will check current table width, and re-assign to 60% if 100%.
            if (curr == '100%') {
                document.getElementById('pageTable').width = '60%';
            }
            else {
                document.getElementById('pageTable').width = '100%';
            }

            // This code will check current div display, and re-assign to visible is hidden & vide versa.
            if (document.getElementById('pageDiv').style.display != 'block') {
                document.getElementById('pageDiv').style.display = 'block';
            }
            else {
                document.getElementById('pageDiv').style.display = 'none';
            }
        }
    </script>
</head>
<body>
    <!-- This table needed a border to identify the dimension change. -->
    <table id="pageTable" width="100%" border="1">
        <tr>
            <td>
                <a href="#" onclick="shrink();">Calling Shrink</a>
            </td>
        </tr>
    </table>
    <!-- This div needed to hidden first to shown on click. -->
    <div id="pageDiv" style="display: none;">
        Now Showing; An extra function.
    </div>
</body>
</html>

更改表格宽度并显示div onClick

4 个答案: