Javascript 如何为li创建jquery函数

因此，我创建了一个带有

的div，其中包含过滤器列表，当单击任何

时，它会显示相应的过滤器

以下几点看起来不太有希望：

$(".f1").click(function(){
    $(".Field1").removeClass("hidden");
    $(".Field2").addClass("hidden");
    $(".Field3").addClass("hidden");
});

如何创建一个函数，以便在单击“selectul”div中的

li

时，相应的结果显示在“options div”中

---

非常感谢。

我会这样注释您的每个li元素：

<li class="clickable" data-field="1"><div class="itemslist">Field1</div></li>
<li class="clickable" data-field="2"><div class="itemslist">Field2</div></li>
<li class="clickable" data-field="3"><div class="itemslist">Field3</div></li>
<li class="clickable" data-field="4"><div class="itemslist">Field4</div></li>
<li class="clickable" data-field="5"><div class="itemslist">Field5</div></li>

<div class="Field1 Field">
<h3>Options for Field1</h3>
<input type = "checkbox" value="1" />option1
<input type = "checkbox" value="2">option2
<input type = "checkbox" value="3">option3
</div>
</li>
<li><div class="Field2 Field">
<h3>Options for Field2</h3>
<input type = "checkbox" value="11">option11
<input type = "checkbox" value="12">option12
<input type = "checkbox" value="13">option13
</div>
</li>
<li>
<div class="Field3 Field">
<h3>Options for Field3</h3>
<input type = "checkbox" value="21">option21
<input type = "checkbox" value="22">option23
<input type = "checkbox" value="23">option23
</div>

$(".clickable").click(function(){
    $(".Field").hide();
  var element=$(this).data("field");
  $(".Field" + element).show();
})

$(".Field").hide();

---

您只需要对id、类和脚本进行以下更改。我还附上了代码片段

var curPage=”“；
$（文档）。在（“单击”上，“#选择a”，函数（）{
if（curPage.length）{
$（“#”+curPage）.hide（）；
}
curPage=$（此）.data（“页面”）；
$（“#”+curPage.show（）；
$（this）.addClass（'activeli'）.sides（）.removeClass（'active'）；
});
正文{
字体系列：helvetica；
字体大小：20px；
}
#内容{
溢出：隐藏；
高度：自动；
宽度：60%；
背景色：白色；
填充：20px；
边界半径：12px；
}
ul，
ul#选择ul{
列表样式：无；
填充：0px；
边际：0px；
}
#精选李{
边框：1px纯红；
光标：指针；
}
#选择li：悬停{
背景色：红色；
颜色：白色；
}
#主机箱{
填充：20px；
}
#选择项目{
浮动：左；
}
.项目列表{
填充：7px；
}
#选项div{
浮动：左；
宽度：350px；
高度：193px；
边框：1px纯红；
}
阿维利先生{
背景色：红色；
}
.隐藏{
显示：无；
}



字段1


字段2


字段3


字段4


字段5




字段1的选项
选择1
选择2
选择3


字段2的选项
选择11
选择12
选择13


字段3的选项
选择21
选择23
选择23


字段4的选项
选择31
选择33
选择33


字段5的选项
选择41
选择42
选择43


请解释您的查询。您想要实现什么？@GSB单击Field1时，应列出Field1的选项。单击Field1时，应列出Field2的选项。就这些。但除了所选字段之外的其他选项应隐藏。但是我不想让它像我在问题中粘贴的代码一样。我怎样才能用函数实现这一点？非常感谢。这很有帮助！！