Javascript 如何制作选项卡菜单

我想当我点击

#tab1

时，首先应该打开id为

tab1

的

面板

。这个过程是用所有的

li

完成的

我在

jquery

方面并不完美

请帮忙

$（文档）.ready（函数（$）{
$（'ul li a#'）。单击（函数（）{
$（''）.addClass（'show'）
})
});
ul{高度：40px；}
li{float:left；padding:5px；背景色：#ccc；颜色：#333；左边距：10px；列表样式：无；}
.panel{高度：100px；宽度：800px；边距：0自动10px；背景色：#ccc；/*显示：无；*/}
.show{display:block；}







1.
2.
3.
4.
不必添加类，只需使用
.hide（）
和
.show（）
并将
数据id
属性添加到
a
元素中，该元素具有相应的
id
，以便在单击该类时，可以检索
id
并对其应用
.show（）


$（文档）.ready（函数（）{
$（'.panel'）.hide（）；
$（'#tab1'）.show（）；
$（'ul li a'）。单击（函数（）{
$（'.panel'）.hide（）；
$（'#'+$（this.data（'id'））.show（）；
})
});
ul{
高度：40px；
}
李{
浮动：左；
填充物：5px；
背景色：#ccc；
颜色：#333；
左边距：10px；
列表样式：无；
}
.小组{
高度：100px；
宽度：800px；
保证金：0自动10px；
背景色：#ccc；
/*显示：无*/
}







1.
2.
3.
4
不必添加类，只需使用
.hide（）
和
.show（）
并将
数据id
属性添加到
a
元素和相应的
id
，以便在单击它时可以检索
id
并对其应用
.show（）


$（文档）.ready（函数（）{
$（'.panel'）.hide（）；
$（'#tab1'）.show（）；
$（'ul li a'）。单击（函数（）{
$（'.panel'）.hide（）；
$（'#'+$（this.data（'id'））.show（）；
})
});
ul{
高度：40px；
}
李{
浮动：左；
填充物：5px；
背景色：#ccc；
颜色：#333；
左边距：10px；
列表样式：无；
}
.小组{
高度：100px；
宽度：800px；
保证金：0自动10px；
背景色：#ccc；
/*显示：无*/
}







1.
2.
3.
4
使用
.show（）
和
隐藏（）
。例如：


ul{高度：40px；}
li{float:left；padding:5px；背景色：#ccc；颜色：#333；左边距：10px；列表样式：无；}
.panel{高度：100px；宽度：800px；边距：0自动10px；背景色：#ccc；/*显示：无；*/}
.show{display:block；}






1.
2.
3.
4.
$（文档）.ready（函数（）{
$（'.panel'）.hide（）；$（'#tab1'）.show（）；
$（'ul li a'）。单击（函数（）{
$（'.panel'）.hide（）；
$（this.addClass（'show'）；
var id=$（this.attr（'href'）；
$（id.show（）；
})
});
使用
.show（）
和
隐藏（）
。例如：


ul{高度：40px；}
li{float:left；padding:5px；背景色：#ccc；颜色：#333；左边距：10px；列表样式：无；}
.panel{高度：100px；宽度：800px；边距：0自动10px；背景色：#ccc；/*显示：无；*/}
.show{display:block；}






1.
2.
3.
4.
$（文档）.ready（函数（）{
$（'.panel'）.hide（）；$（'#tab1'）.show（）；
$（'ul li a'）。单击（函数（）{
$（'.panel'）.hide（）；
$（this.addClass（'show'）；
var id=$（this.attr（'href'）；
$（id.show（）；
})
});
我将提出完全不使用javascript的纯CSS解决方案。您可以使用pseudo类来显示与当前所选位置哈希相对应的id的面板

要实现这一点，您需要将
.panel
设置为默认隐藏，并使用规则
.panel:target{display:block}
显示它


ul{高度：40px；}
li{float:left；padding:5px；背景色：#ccc；颜色：#333；左边距：10px；列表样式：无；}
.panel{高度：100px；背景色：#ccc；显示：无；}
.小组：目标{
显示：块；
}






1.
2.
3.
4
我将提出完全没有javascript的纯CSS解决方案。您可以使用pseudo类来显示与当前所选位置哈希相对应的id的面板

要实现这一点，您需要将
.panel
设置为默认隐藏，并使用规则
.panel:target{display:block}
显示它


ul{高度：40px；}
li{float:left；padding:5px；背景色：#ccc；颜色：#333；左边距：10px；列表样式：无；}
.panel{高度：100px；背景色：#ccc；显示：无；}
.小组：目标{
显示：块；
}






1.
2.
3.
4
这应该对您有所帮助


$（文档）.ready（函数（$）{
$（'ul li a'）。单击（函数（）{
var active_id=$（'div.panel.show'）.attr（'id'）；
var new_id=$（this.attr（'href'）；
如果（活动的_id！='undefined'&&&'#'+活动的_id==新的_id）{
$（new_id）.removeClass（'show'）；
}
否则{
$（'div.panel'）.removeClass（'show'）；
$（new_id）.addClass（'show'）；
}
})
});
ul{高度：40px；}
li{float:left；padding:5px；背景色：#ccc；颜色：#333；左边距：10px；列表样式：无；}
.面板{高度：100px；宽度：800px；边距：0自动10px；背景色：#ccc；显示：无；}
.show{display:block；}







1.
2.
3.
4.
这应该对您有所帮助


  $(document).ready(function ($) {
            var firstitem = $("#tabmenu li").first();
            firstitem.addClass("activeitem");
            showSelectedItem(firstitem.find("a").attr("data-href"));
            $('#tabmenu li').click(function () {
                $(this).addClass("activeitem");
                $('#tabmenu li').not(this).removeClass("activeitem")
                showSelectedItem($(this).find("a").attr("data-href"));
                //  $('').addClass('show')
            })
        });

        function showSelectedItem(selector) {
            $(selector).addClass("activepanel").fadeIn("slow");
            $(".panel").not(selector).removeClass("activepanel").hide();
        }