javascript - 单击一个类以显示一个 li

Question

我正在尝试创建一个菜单系统来切换/显示(淡入淡出或切换会很好)元素的内容。因此用户不必更改页面。通常会使用 ajax (.load) 但不希望其他文件保存文本(由于 cms)。

似乎无法让它工作:

https://jsfiddle.net/feto4ymt/7/

更新

仍然会破坏主菜单系统，但嵌套在其中的二级菜单系统现在不会破坏: https://jsfiddle.net/ph3ng2fo/35/

在滑动嵌套在另一个菜单系统之前: https://jsfiddle.net/ph3ng2fo/34/

之前(每个菜单系统都在单独操作模式下都可以正常工作)主营:http://jsfiddle.net/3to0neLm/1嵌套在主里:http://jsfiddle.net/feto4ymt/1

脚本

$(".tab_item2").click(function() {
$(".tab_item2").removeClass(".tab_item_color2");
$(this).addClass(".tab_item_color2");
$(".tabitem2").show(".slide_content2");
});

Answer 1

你可以使用.eq(), .index(), .hide()

$(".tab_item2").click(function() {
  $(".tab_item2").removeClass("tab_item_color2");
  $(this).addClass("tab_item_color2");
  // hide all `.tabslider2 li` elements,
  // select, show `.tabslider2 li` element at current `.tab_item2` index
  $(".tabslider2 li").hide().eq($(this).index(".tab_item2")).show();
});

https://jsfiddle.net/feto4ymt/14/