Javascript - скрыть/показать - несортированные списки - onClick

Я пытаюсь скрыть/показать несортированные списки с помощью onClick-Event.

В верхней части находятся три различных параметра для выбора:

<ul id="homepage-posts-block" class="tabs-search quicktabs-tabs quicktabs-style-nostyle"> 
    <li class="grid-feat-ad-style active" onclick="zeigeFilter(catF, typF, locF)"><a class="current" href="#"></i><?php _e( 'Categories', 'agrg' ); ?></a></li>
    <li class="list-feat-ad-style" onclick="zeigeFilter(locF, typF, catF)" ><a class="" href="#"></i><?php _e( 'Types', 'agrg' ); ?></a></li>
    <li class="list-feat-ad-style" onclick="zeigeFilter(typF, catF, locF)" ><a class="" href="#"></i><?php _e( 'Locations', 'agrg' ); ?></a></li>
</ul>

После выбора одного из них вызывается функция "zeigeFilter":

<script>
function zeigeFilter(var id1,var id2,var id3 ) {
    document.getElementById(id1).style.visibility = 'show';
    document.getElementById(id2).style.visibility = 'hidden';
    document.getElementById(id3).style.visibility = 'hidden';
}
</script>

В зависимости от того, какой параметр выбран, будет отображаться конкретная оболочка.

<ul class="filters-lists" id="catF">
  <li>..</li>
</ul>
<ul class="filters-lists" id="typF">
  <li>..</li>
</ul>
<ul class="filters-lists" id="locF">
  <li>..</li>
</ul>

Моя проблема в том, что все три списка отображаются в любое время. Я надеюсь, что кто-то может мне помочь.

Спасибо, Джо


hide visibility onclick show html-lists
person joh3    schedule 23.09.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот решение:

  • это не «показать», а «видимый» для свойства видимости (CSS)
  • неверные параметры для вызова метода zeigeFilter

Правильный код:

<script type="text/javascript">
function zeigeFilter(id1, id2, id3) {
    document.getElementById(id1).style.visibility = 'visible';
    document.getElementById(id2).style.visibility = 'hidden';
    document.getElementById(id3).style.visibility = 'hidden';
}
</script>

<ul id="homepage-posts-block" class="tabs-search quicktabs-tabs quicktabs-style-nostyle"> 
    <li class="grid-feat-ad-style active" onclick="zeigeFilter('catF', 'typF', 'locF')"><a  class="current" href="#"></i>premier</a></li>
    <li class="list-feat-ad-style" onclick="zeigeFilter('typF', 'catF', 'locF')"><a class="" href="#"></i>deuxieme</a></li>
    <li class="list-feat-ad-style" onclick="zeigeFilter('locF', 'typF', 'catF')" ><a class="" href="#"></i>troiseme</a></li>
</ul>

<ul class="filters-lists" id="catF">
  <li>..</li>
</ul>
<ul class="filters-lists" id="typF">
  <li>..</li>
</ul>
<ul class="filters-lists" id="locF">
  <li>..</li>
</ul>
person Aurel76    schedule 29.10.2014