在onClick()方法中切换元素的可见性。

Question

我有一个无序列表和一堆文章，这些文章都在页面顶部以绝对位置隐藏。每篇文章都坐落在不同的div中，并具有不同的ID。我想能够点击列表项并使相应的文章可见，然后当我点击不同的列表项时，当前可见的文章消失，并用相应的新文章取而代之。

这是HTML：

<div class="articlelist">
        <ul>
            <li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article1').style.visibility='visible'">ARTICLE 1</li>
            <li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article2').style.visibility='visible'">ARTICLE 2</li>
            <li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article3').style.visibility='visible'">ARTICLE 3</li>
            <li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article4').style.visibility='visible'">ARTICLE 4</li>
        </ul>
    </div>
    <div class="fullarticle" id="article1">
        <h1>ARTICLE 1</h1>
        <p>ABCDEFGH</p>
    </div>
    <div class="fullarticle" id="article2">
        <h1>ARTICLE 2</h1>
        <p>ABCDEFGH</p>
    </div>
    <div class="fullarticle" id="article3">
        <h1>ARTICLE 3</h1>
        <p>ABCDEFGH</p>
    </div>
    <div class="fullarticle" id="article4">
        <h1>ARTICLE 4</h1>
        <p>ABCDEFGH</p>
    </div>

以下是CSS代码：

.fullarticle {
  width: 61%;
  margin-right: 2%;
  float: left;
  position: absolute; top: 80px; left: 37%;
  visibility: hidden;
}


.articlelist {
  float: left;
  width: 37%;
}

- user2798841

---

请发布你的代码和尝试过的内容。 - j08691

如果您能够创建一个 jsFiddle 的话，我们也可以看到它的“实时”效果，那就更好了。您可以在 http://jsfiddle.net 上创建一个。 - display-name-is-missing

http://jsfiddle.net/97vmH/ - user2798841

@user2798841 你会使用jQuery吗？ - Felix

我之前写了一些不使用jQuery的东西：http://jsfiddle.net/MrPolywhirl/SujEb/ - Mr. Polywhirl

Answer 1

在标签内部：

var toggleVisibility = function(element) {
    if(element.style.visibility=='visible'){
        element.style.visibility='hidden';
    } else {
        element.style.visibility='visible';
    }
};

如果您坚持使用 onclick，请将其更改为 onclick="toggleVisibility(document.getElementById('articleId'))"，其中 articleID 是文章 div 中的一个 ID。

但是 使用 visibility 隐藏和显示内容会保留较低项在其不可见的伙伴下面，因此请改用 display 与 none 和 block。

var toggleVisibility = function(element) {
    if(element.style.display=='block'){
        element.style.display='none';
    } else {
        element.style.display='block';
    }
};

这有点复杂，但避免为一个小任务导入庞大的jQuery库。

- user70585

---

你应该在那里使用 == 运算符。我正在编辑你的帖子。 - Marek

Answer 2

如果你使用jQuery：

<div class="articles">
<div class="articlelist">
    <ul>
        <li style="display:block;" onclick="toggleArticles('article1')">ARTICLE 1</li>
        <li style="display:block;" onclick="toggleArticles('article2')">ARTICLE 2</li>
        <li style="display:block;" onclick="toggleArticles('article3')">ARTICLE 3</li>
        <li style="display:block;" onclick="toggleArticles('article4')">ARTICLE 4</li>
    </ul>
</div>
<div class="fullarticle" id="article1">
    <h1>ARTICLE 1</h1>
    <p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article2">
    <h1>ARTICLE 2</h1>
    <p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article3">
    <h1>ARTICLE 3</h1>
    <p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article4">
    <h1>ARTICLE 4</h1>
    <p>ABCDEFGH</p>
</div>
</div>

<script>
function toggleArticles(articleID) {
    $('#articles .fullArticle').hide(); // this hides all currently open articles (if any);
    $('#articles #' + articleID).show(); // show article
}
$('#articles .fullArticle').hide();
</script>

- cyadvert

Answer 3

如果您使用jQuery，可以这样做：

$('.articlelist ul li').click(function() {
    var i = $(this).index();
    $('.fullarticle').hide();
    $('#article' + (i+1)).show();
});

Updated Fiddle

- Felix

---

如果您能够帮忙，我有另一个问题。是否有一种方法可以在选择文章时突出显示文章列表中的文章，然后当我从列表中点击另一篇文章时，该文章变为突出显示？ - user2798841

我正在使用这段代码。有没有一种方法可以默认显示一个div？目前，您必须单击才能查看任何内容。 - Chris