Переключатель видимости элемента в методе onClick()

У меня есть неупорядоченный список и куча статей, все с абсолютными позициями в верхней части страницы и скрытыми. Каждая статья находится в другом div и имеет другой идентификатор. Я хотел бы иметь возможность щелкнуть элемент списка и соответствующую статью, чтобы стать видимой, а затем, когда я нажимаю на другой элемент списка, видимый элемент исчезает, и новая статья, соответствующая этой статье, появляется на своем месте.Переключатель видимости элемента в методе onClick()

Вот 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%; 
}

источник

2014-02-14 user2798841

Опубликуйте свой код и то, что вы пробовали, пожалуйста. – j08691

Было бы неплохо, если бы вы также могли создать jsFiddle, чтобы мы могли видеть его «живым». Сделайте один на http://jsfiddle.net –

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

Если вы используете JQuery, вы можете сделать:

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

Updated Fiddle

источник

2014-02-14 02:15:47 Felix

блестящий, большое спасибо! – user2798841

У меня есть другой вопрос, если вы думаете, что могли бы помочь. Есть ли способ, чтобы статья в списке статей могла быть подсвечена при ее выборе, а затем, когда я нажимаю другую статью из списка, который вместо этого выделяется? – user2798841

Нравится это: http://jsfiddle.net/97vmH/4/? – Felix

Если у вас есть 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>

источник

2014-02-14 02:06:47 cyadvert

внутри 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 с

НО hidin г и отображение контента с visibility будет держать нижние элементы под их невидимыми партнерами, поэтому используйте display с none и block вместо

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

Это немного сложнее, но позволяет избежать импорта массивной библиотеки JQuery для столь маленьких Задача

источник

2014-02-14 02:33:42

Вы должны использовать == operator. Я редактирую ваш пост. – Marek

Переключатель видимости элемента в методе onClick()

ответ

Смежные вопросы