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/

Unobtrusive 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 を使用しないでください。onClick 属性に関数を入れる代わりに、jQuery の click() 関数を使用してリンクに結び付けます
  • 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 に答える