Basculer la visibilité de l'élément dans le onClick() la méthode

J'ai une liste non ordonnée et un tas d'articles, tous avec des positions absolues en haut de la page et caché. Chaque article se trouve dans un autre div et possède un ID différent. Je voudrais être en mesure de cliquer sur un élément de liste et l'article correspondant à devenir visible, et puis quand je clique sur un autre élément de la liste, l'élément visible disparaît et le nouvel article qui correspond à ce que l'article apparaît à sa place.

Voici le code 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>

et voici le CSS

.fullarticle {
width: 61%;
margin-right: 2%;
float: left;
position: absolute; top: 80px; left: 37%;
visibility: hidden;
}
.articlelist {
float: left;
width: 37%;
}
Poste ton code et ce que vous avez essayé s'il vous plaît.
Il serait bien aussi si vous pouvez aussi faire un jsFiddle, de sorte que nous pouvons la voir "en live". Le faire sur jsfiddle.net
jsfiddle.net/97vmH
Pouvez-vous utiliser jQuery?
J'ai écrit quelque chose d'un temps qui n'utilise pas jQuery: jsfiddle.net/MrPolywhirl/SujEb

OriginalL'auteur user2798841 | 2014-02-14

  1. 2

    Si vous utilisez jQuery, vous pouvez le faire:

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

    Mis À Jour Le Violon

    génial, c'est génial merci beaucoup!
    J'ai une autre question si vous pensez que vous pourriez aider. Est-il possible que l'article correspondant dans la liste d'article peut être mis en évidence lorsqu'il est sélectionné, puis que je clique sur un autre article de la liste qui est mis en évidence à la place?
    Comme ceci: jsfiddle.net/97vmH/4?
    Je suis l'aide de ce code. Est-il possible que l'un div pouvez affiché par défaut? À la minute, vous devez cliquer sur voir tout contenu à tout.

    OriginalL'auteur Felix

  2. 3

    à l'intérieur de la head:

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

    et puis changer le onclicks (si vous insister sur leur utilisation) à onclick="toggleVisibility(document.getElementById('articleId'))" où articleID est l'ID de celui de l'article divs

    MAIS
    masquage et affichage de contenu avec visibility va garder les éléments inférieurs en vertu de leur invisible partenaires, afin de l'utiliser display avec none et block au lieu

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

    C'est un peu plus compliqué, mais évite d'importer le massif de la bibliothèque jQuery pour une petite tâche

    Vous devez utiliser l'opérateur==. Je suis d'éditer votre post.

    OriginalL'auteur John Doe

  3. 2

    Si vous avez 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>

    OriginalL'auteur cyadvert