0

我正在使用 jQuery 隐藏/显示页面上的部分内容。在一页上，我有两个这样的部分。现在页面加载时都隐藏了。我需要在第一个 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 来加载可见和正确的切换文本（隐藏存档）来显示。有任何想法吗？

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 id="toggleArch12" style="display:block">content goes here</div>
于 2012-07-23T21:00:08.023 回答
0

首先，如果您希望其中一个 div 可见，请不要指定 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 回答