0

おはようございます、

先週以来、私は共通の問題のように見えるものに苦労しています (この問題について読んだトピックの数を考慮して): 切り替えられたコンテンツを別のページからリンクする方法.

私はこのトピックに進むことができました。私はまだ問題に直面しています (いつものように、解決策または回答は別の問題につながります!):

別のページからトグルされたコンテンツへのリンクは機能しますが、ページのすべての div が開きます。質問は簡単ですが、単一の div のコンテンツを切り替えるにはどうすればよいですか?

私のコードは次のとおりです（これはページのコンテンツの抜粋です-コンテンツが切り替えられた2つ以上のdivがあります）。はい、私はそれがかなり醜いことを知っていますが、私はHTML/CSSなどで自分の道を歩もうとしています。

どうもありがとう！

 <style type="text/css">
 #ToggleTarget {
 display: none;
 }
</style>
<SCRIPT type=text/javascript>
function Toggle() {
 var el = document.getElementById("ToggleTarget");
 if (el.style.display == "block") {
  el.style.display = "none";
 }
 else {
  el.style.display = "block";
 }
}
</SCRIPT>
<style type="text/css">
    #ToggleTarget2 {
    display: none;
    }
</style>
<SCRIPT type=text/javascript>
function Toggle2() {
 var el = document.getElementById("ToggleTarget2");
 if (el.style.display == "block") {
  el.style.display = "none";
 }
 else {
  el.style.display = "block";
 }
}
</SCRIPT>



<body>
<p><a href="javascript:Toggle();" name="link1"><span><strong>TITLE1</strong></span></a></p>
                                    <div class="ToggleTarget" id="ToggleTarget">
                                    <p align="justify">CONTENT1</div>
<p><a href="javascript:Toggle2();" name="link2"><span><strong>TITLE2</strong></span></a></p>
                                    <div class="ToggleTarget2" id="ToggleTarget2">
                                    <p align="justify">CONTENT2</div>
</body>

<SCRIPT type=text/javascript>
if ( location.hash.length > 1 )
{
    Toggle( location.hash.substring(1) );
    Toggle2( location.hash.substring(1) );

}
</SCRIPT>

編集:私は問題がから来ていると思います:

if ( location.hash.length > 1 )
{
    Toggle( location.hash.substring(1) );
    Toggle2( location.hash.substring(1) );

}

( location.hash.length > 1 ) の場合、関数 "Toggle" と "Toggle2" からトグルされた両方のコンテンツを開きます。あれは正しいですか？

4

1 に答える 1

0

「トグルされたコンテンツを別のページからリンクする方法」とはどういう意味ですか? あなたのコードを考えると、外部リンクがあなたのページにつながり、div を切り替えたいと思われますよね?

その場合、いくつかの変更点があります。まず、これ...

Toggle( location.hash.substring(1) );

...あなたが望むように動作しません。実際、関数Toggle() は引数を取りません。

ただし、関数のより「一般化された」バージョンを作成することもできます。これは、divトグルする ID を引数として受け取ります。

function Toggle(id) {
    var el = document.getElementById(id);
    if (el.style.display == "block") {
        el.style.display = "none";
    } else {
        el.style.display = "block";
    }
}

そしてページの最後に…

if (location.hash.length > 1) {
    Toggle(location.hash.substring(1));
}

たとえば、ページに という名前が付けられている場合、mypage.htmlへのリンクmypage.html#example-idはページをロードし、 ID の要素を切り替えますexample-id。

最後に一つだけ; display: none切り替え可能なすべての div に適用する代わりに、クラスToggleTargetを作成してそれを指定しdisplay: noneます。次に、トグル可能なすべての要素にこのクラスを与え、一意の ID を与えます。

作業バージョン

<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            .ToggleTarget {
                display: none;
            }
        </style>
        <script type="text/javascript">
            function toggle(id) {
                var el = document.getElementById(id);
                if (el.style.display == "block") {
                    el.style.display = "none";
                } else {
                    el.style.display = "block";
                }
            }
        </script>
    </head>
    <body>
        <p><a href="javascript:toggle('1');"><strong>TITLE1</strong></a></p>
        <div class="ToggleTarget" id="1">
            <p align="justify">CONTENT1</p>
        </div>
        <p><a href="javascript:toggle('2');"><strong>TITLE2</strong></a></p>
        <div class="ToggleTarget" id="2">
            <p align="justify">CONTENT2</p>
        </div>
        <script type="text/javascript">
            if (location.hash.length > 1) {
                toggle(location.hash.substring(1));
            }
        </script>
    </body>
</html>
于 2013-07-22T10:20:45.967 に答える