Javascript 如何在单击时更改菜单的样式？

如何更改用户选择的活动菜单/子菜单的样式？单击子菜单时，我希望该子菜单及其父菜单具有不同的样式（如悬停，但为永久）

/*jQuery时间*/
$（文档）.ready（函数（）{
$（“#手风琴h3”）。单击（函数（）{
//向上滑动所有链接列表
$（“#手风琴ul”）.slideUp（）；
//向下滑动h3下的链接列表-仅当其已关闭时
如果（！$（this）.next（）是（“：可见”））
{
$（this.next（）.slideDown（）；
}
})
})

/*文本的自定义字体*/
@导入url(http://fonts.googleapis.com/css?family=Nunito);
/*用于fontawesome的CSS文件-我们将使用的ICont。导入的此CSS文件包含字体面声明。更多信息：http://fortawesome.github.io/Font-Awesome/ */
@导入url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
/*基本重置*/
*{边距：0；填充：0；}
身体{
背景#4EB889；
字体系列：Nunito、arial、verdana；
}
#手风琴的{
背景#004050；
宽度：250px；
保证金：100px自动0自动；
颜色：白色；
/*一些很酷的阴影和辉光效果*/
框阴影：
0 5px 15px 1px rgba（0,0,0,0.6），
200px 1px rgba（255,255,255,0.5）；
}
/*标题样式*/
#手风琴h3{
字体大小：12px；
线高：34px；
填充：0 10px；
光标：指针；
/*不支持渐变的浏览器的回退*/
背景#003040；
背景：线性梯度（#003040，#002535）；
}
/*航向悬停效应*/
#手风琴h3：悬停{
文本阴影：0 1px rgba（255、255、255、0.7）；
}
/*iconfont样式*/
#手风琴h3音阶{
字体大小：16px；
右边距：10px；
}
/*清单项目*/
#李手风琴{
列表样式类型：无；
}
/*链接*/
#手风琴手{
颜色：白色；
文字装饰：无；
字体大小：11px；
线高：27px；
显示：块；
填充：0 15px；
/*平滑悬停动画的过渡*/
过渡：均为0.15秒；
}
/*链接上的悬停效果*/
#手风琴：悬停{
背景#003545；
左边框：5px实心浅绿色；
}
/*默认情况下，允许隐藏非活动LIs*/
#手风琴{
显示：无；
}
#手风琴手{
显示：块；
}

仪表板








任务









历法













宠儿

您可以向CSS文件添加

。选择的
类：

.selected {
    background-color: <your_color>;
}

您可以将
。选定的
类添加到CSS文件中：

.selected {
    background-color: <your_color>;
}

只需添加以下javascript代码：

$("#accordian h3").click(function(){
      $('.active').removeClass('active');
      $(this).addClass('active');
});
$('#accordian li a').click(function(){
     $('.submenu-active').removeClass('submenu-active');
     $(this).addClass('submenu-active');
});

这个CSS：

.active{
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
    color: red; /* NOTE i INTENTIONALLY ADDED RED COLOR TO ILLUSTRATE BETTER */
}
.submenu-active{
    background: #003545;
    border-left: 5px solid lightgreen;
}

试试这个

说明：

单击菜单项时，要从以前的活动项中删除
.active
类，并将其设置为单击的项。这同样适用于子菜单项，我在其中添加了
。子菜单active
类，而不是
。active
只需添加以下javascript代码：

$("#accordian h3").click(function(){
      $('.active').removeClass('active');
      $(this).addClass('active');
});
$('#accordian li a').click(function(){
     $('.submenu-active').removeClass('submenu-active');
     $(this).addClass('submenu-active');
});

这个CSS：

.active{
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
    color: red; /* NOTE i INTENTIONALLY ADDED RED COLOR TO ILLUSTRATE BETTER */
}
.submenu-active{
    background: #003545;
    border-left: 5px solid lightgreen;
}

试试这个

说明：

单击菜单项时，要从以前的活动项中删除
.active
类，并将其设置为单击的项。这同样适用于我添加
.submenu active
类而不是
.active
的子菜单项，创建一个具有所需样式的css类。向li添加一些类（例如
class=“li\u to\u单击”
），然后使用以下代码：

$('.li_to_click').click(function() {
    $(this).toggleClass('class_with_style');
    $(this).parent().toggleClass('class_with_style');
});

您可能需要根据需要更改代码。
创建具有所需样式的css类。向li添加一些类（例如
class=“li\u to\u单击”
。然后使用以下代码：

$('.li_to_click').click(function() {
    $(this).toggleClass('class_with_style');
    $(this).parent().toggleClass('class_with_style');
});

您可能需要根据需要更改代码。
您的问题是什么？我编辑了我的问题。使用java更改类是可行的，但当我重新加载索引页或转到另一页时，“活动”类重置。所以菜单会改变其初始位置。这是我现在的问题。你的问题是什么？我编辑了我的问题。用java更改类是可行的，但当我重新加载索引页或转到另一页时，“活动”类重置。所以菜单将改变其初始位置。这是我现在的问题。我有一个问题。我的菜单项有如下链接：index.php？page=page1&id=1当我单击它时，它将转到page1，菜单将关闭。所以我看不到活动的子菜单项。我想这是另一个问题：（我有一个问题。我的菜单项有如下链接：index.php？page=page1&id=1当我单击它时，它将进入第1页，菜单将关闭。因此我看不到活动的子菜单项。我想这是另一个问题：(