0

我试图将表格的宽度从 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我应该应用它。此外，桌子的宽度没有改变。

4

4 回答 4

2

请不要内联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/

于 2012-08-23T13:23:49.417 回答
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 中更整洁。

于 2012-08-23T13:25:42.880 回答
0

如果您使用的是 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”。
于 2012-08-23T13:23:04.823 回答
0

这应该很简单。这是执行扩展和隐藏/显示的 Html 和 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>
于 2012-08-23T13:34:35.487 回答