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%;
}

Answer 1

在head：

内

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

然后将onclicks（如果坚持使用它们）更改为onclick="toggleVisibility(document.getElementById('articleId'))"，其中articleID是其中一篇文章div的ID < / p>

<强> BUT 使用visibility隐藏和显示内容会将较低的项目保留在其不可见的合作伙伴下，因此请display使用none和block而不是

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

这有点复杂，但是避免为这么小的任务导入大量的jQuery库

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>

Answer 3

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

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

<强> Updated Fiddle

在onClick（）方法中切换元素的可见性

3 个答案: