jquery - 更改表格宽度并显示一个 div onClick

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

更新:我们已经确定该表正在使用 AJAX 加载，因此需要 .live 函数。

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

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