0

これは簡単なはずですが、正しく機能していません...私はjavascriptにかなり錆びていて、何が欠けているのか理解できません。

2番目の矢印だけを残して、人が小さな矢印をクリックすると消えたいナビゲーションバーがあります。ユーザーが2番目の矢印をクリックすると、ナビゲーションバーが再表示されます。すべてのナビゲーションバーが1つのタグに含まれています。ナビゲーションメニュー自体は非常に長いのですが、その理由の1つは、ユーザーがメニューのオンとオフを切り替えることができるようにすることです。

ヘッド内のJavascript関数は次のとおりです。

<script type="text/javascript">
function collapseMenu()
{document.getElementById("navbar").innerHTML ='<td id=navbar2><a href="javascript:void(0)" onclick="collapseMenu('navbar2');"><img src="arrow.gif"></a></td>';
}</script>

ページのテキストは次のとおりです。

<div id='navbar'>
<td>
<a href="javascript:void(0)" onclick="collapseMenu('navbar');"><img src="arrow.gif"></a>
</td>
</div>

idをdivタグに配置すると、リンクをクリックすると矢印が表示されますが、divタグ間の古いhtmlは削除されません。divの代わりにspanを使用し、一重引用符と二重引用符に違いはありません。id = "navbar"をタグに移動すると、ナビゲーションバーは消えますが、古いtdタグのサイズに対して背景色は変更されません。小さな矢印以外は空白にしたいのですが。したがって、質問1は、なぜdivとspanが機能しないのか、あるいはtdが古いスペースに背景色を残しているのかということです。

2番目の質問は、変数を介してテキストでinnerHTMを指定する方法です。これをすべてヘッダーの関数に入れる必要がないのはいいことです。

アイデアをありがとう！

4

2 に答える 2

0

jsfiddle とは何かわかりませんが、次のコードを .htm ファイルに入れると問題が再現されます。どうも。

<html>
<head>
<script type="text/javascript">
function hideBar()
{document.getElementById("navbar").innerHTML ='<td>show navbar</td>';
}</script>
<script type="text/javascript">
function hideBar2()
{document.getElementById("navbar2").innerHTML ='<td>show navbar</td>';
}</script>
</head>
<body>
<table width=500>
id in td tag
<tr>
<td rowspan=3 bgcolor="yellow" id="navbar">
<a href="javascript:void(0)" onclick="hideBar('navbar');">hide 

menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>

</table>


<table width=500>
id in div tag
<tr>
<div id="navbar2">
<td rowspan=3 bgcolor="yellow">
<a href="javascript:void(0)" onclick="hideBar2('navbar2');">hide 

menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td></div>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>

</table>
</body>
</html>
于 2012-04-09T11:59:38.160 に答える
0

以下は、1 行の背景展開 gif を残します。gif を div の外に移動すると、セルの配置がずれます。テーブルはもはやベスト プラクティスとは見なされていませんが、サイト全体のテーブル構造をやり直すのは大変な作業になることを認識してください。

 <html>
    <head>
        <script type="text/javascript">
            function toggleBar(obj) {
                var navbar = document.getElementById("navbar");
                if (navbar.style.display == "none") {
                    navbar.style.display = "";
                    obj.innerHTML = "<img src='images/collapse.gif' alt='Hide Menu'>";
                } else {
                    navbar.style.display = "none";
                    obj.innerHTML = "<img src='images/expand.gif' alt='Show Menu'>";
                }
            }
        </script>
    </head>
    <body>
    <body><table><tr><td valign="top">
        <div style="background-color:lightgrey;text-align:left;padding-left:4px;width:80px;">
            <a href="javascript:void(0)" onclick="toggleBar(this);"><img src="images/collapse.gif" 

    alt="Hide Menu"></a>
            <div id="navbar">menu1<br>menu2<br>menu3<br>menu4</div>
        </div>
    <td valign="top"><table><tr style="background-color:blue;"><td><font 

    color="white">Title</font></td></tr>
    <tr><td>Body Text</td></tr></table>
    </body>
于 2012-04-15T16:57:19.220 に答える