Question

我试图通过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>

选择一个后，功能＆＃34; zeigeFilter＆＃34;被称为：

<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>

根据选择的选项，显示特定的shell。

<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>

我的问题是，所有三个列表都随时显示。我希望有人可以帮助我。

谢谢， JOH

Answer 1

解决方案来了：

它不是'show'，而是'visible'可见性属性（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>

Javascript - 隐藏/显示 - 未排序列表 - onClick

1 个答案: