CSS 和 Javascript 中的选项卡式菜单 - 刷新页面后选项卡设置为活动状态

Question

我有主要用 HTML 和 CSS 编写的选项卡式菜单。有 5 个选项卡，第一个选项卡在我们第一次加载页面时设置为活动状态。我不得不添加一点 JS 脚本，因为当我们单击另一个选项卡时，该活动选项卡不会将其外观更改为“非活动”（因此我们有两个具有“活动”外观的选项卡）。一切正常，但是如果我们点击第三个选项卡然后刷新网站，第一个选项卡的外观从“非活动”变为“活动”，因此有两个选项卡具有“活动”外观。只有样式错误，选项卡中的内容查看正确的内容...因此，如果我们单击另一个选项卡并刷新页面，我们有两个具有“活动”外观的选项卡，但网站仍然从右侧选项卡查看内容.我不希望第一个选项卡在刷新页面后将其外观设置为“活动”。我不懂JS，也不知道怎么解决。

Javascript：

jQuery(function($){
       $(".tabmenu").children("div").click(function(){
           $(".current").removeClass("current");
       });
   });

这是完整代码：http://jsfiddle.net/y5SzQ/1/

Answer 1

最简单的解决方案

$(".tabmenu").children("div").click(function () {
    $(".current").removeClass("current");
})
.filter(location.hash).click();

_{（测试：更换tab，右键Reload resule frame）}

演示：http://jsfiddle.net/y5SzQ/3/

它所做的只是触发单击事件，类似于用户使用鼠标单击时发生的情况。如果有location.hash（比如'#french-tab'）并且必须选择Polish以外的选项卡，则.filter(location.hash)将变为例如.filter('#french-tab')，并且将选择相应的选项卡。