0

jQuery を使用して、ページ上のコンテンツのセクションを非表示/表示しています。1 ページに、そのようなセクションが 2 つあります。現在、ページは両方とも非表示で読み込まれます。最初の div を表示し、2 番目の div を非表示にしてページを読み込む必要があります。

これが私のJavaScriptです：

function a2012() {
    var ele = document.getElementById("toggleArch12");
    var text = document.getElementById("displayArch12");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "2012 Newsletter Archive";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide Archive";
    }

} 

function a2011() {
    var ele = document.getElementById("toggleArch11");
    var text = document.getElementById("displayArch11");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "2011 Newsletter Archive";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide Archive";
    }

}

そして、DIV とそのトグル リンクを設定するための HTML:

<a id="displayArch12" href="javascript:a2012();">2012 Newsletter Archive</a>
<div id="toggleArch12" style="display:none">content goes here</div>

<a id="displayArch11" href="javascript:a2011();">2011 Newsletter Archive</a>
<div id="toggleArch11" style="display:none">content goes here</div>

最初の div の style="display:none" を style="display:visible" に変更しようとしましたが、コンテンツが表示された状態でページが読み込まれますが、トグル リンクにはまだ「クリックして開く」というテキストが表示されます (この場合は「2012 ニュースレター アーカイブ」)。

最初の div をロードして表示する必要があり、正しいトグル テキスト (Hide Archive) も表示する必要があります。何か案は？

4

4 に答える 4

1

jQuery を使用したい場合 (あなたが投稿したコードからのものではない)、次のように書くことができます:

$("#displayArch11").click(function(e) {
    var $display = $(this)
    $display.next().toggle(function() {
         $display.html($display.html() == "2011 Newsletter Archive" ? "Hide Archive" : "2011 Newsletter Archive");
    });
    e.preventDefault();        
});
$("#displayArch12").click(function(e) {
    var $display = $(this)
    $display.next().toggle(function() {
         $display.html($display.html() == "2012 Newsletter Archive" ? "Hide Archive" : "2012 Newsletter Archive");
    });
    e.preventDefault();        
});

そして、このようなHTML

<a id="displayArch12" href="#">2012 Newsletter Archive</a>
<div id="toggleArch12" style="display:none">content goes here</div>

<a id="displayArch11" href="#">2011 Newsletter Archive</a>
<div id="toggleArch11" style="display:none">content goes here</div>
于 2012-07-23T21:13:31.953 に答える
0

まず、div の 1 つを表示したい場合は、display プロパティを指定しないでください。これらはデフォルトで表示されます。div で探している値は display:block; ですが。

トグルのニーズに合わせて、リンクの代わりに div を使用します。

<div id="displayArch12" class="toggleDiv">
    2012 Newsletter Archive
    <div id="toggleArch12" style="display:block;">Content Here</div>
</div>
<div id="displayArch11" class="toggleDiv">
    2011 Newsletter Archive
    <div id="toggleArch11" style="display:none;">Content Here</div>
</div>

次に、それらを適切に切り替えるには、実際の jQuery が必要です。

$(function() {
    $(".toggleDiv").click(function () {
        $("div:first-child", this).toggle();
    });
});

それはあなたのために働くはずです。もちろん、jQuery ライブラリ自体を含めることも忘れないでください。最も簡単な方法は、Google API リンクを使用することです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
于 2012-07-23T21:06:30.283 に答える
0

これは jQuery を使用すると簡単ですが、正しいデフォルトの html を設定するだけで目標を達成できると思います。

<a id="displayArch12" href="javascript:a2012();">Hide Archive</a>
<div id="toggleArch12" style="display:block">content goes here</div>
于 2012-07-23T21:11:05.600 に答える
0

インライン スクリプトを変更します。

<div id="toggleArch12" style="display:block">content goes here</div>
于 2012-07-23T21:00:08.023 に答える