导航菜单点击跳转后如何改变其样式

Posted 2023-05-07

具体请看：http://jingjia.baidu.com/ 的导航菜单
就是点击某个菜单跳转后改变被点击菜单的样式，而再次点击其他菜单的时候，原来被点击的样式恢复原样，唯独被点击的那个菜单保持选中样式。
总之就是上面百度的那个导航怎么弄出来的，关键是跳转后他是怎么判断之前点过什么的。要能适合dedecms套模板的，最好不要是判断当前网址的那种方法，小弟我JS那些的水平不太好，如果可以的能简单的注释下，小弟在此先谢过，还望各位大侠不吝赐教。
先谢谢258668的回答！但我还有些疑问？
<div id=menu_content>
<ul>
<li class=menu_on><a href="dede:global.cfg_indexurl/">首页</a></li>
dede:channel type='top' row='10' currentstyle="<li class='menu_on'><a href='~typelink~' ~rel~>~typename~</a></li>"
<li><a href="[field:typelink/]" [field:rel/]>[field:typename/]</a></li>
/dede:channel
</ul>
</div>
这个是我套的导航，我首页的那个栏目不是动态生成的，所以切到其他页面首页也都是选中状态，这个能解决下么？

参考技术A 你套dedecms何必用脚本呢？程序调用就可以实现了。

dede:channel type='top' row='10' currentstyle="<li class='hover'><a href='~typelink~' ~rel~>~typename~</a></li>"
<li><a href='[field:typeurl/]' [field:rel/]>[field:typename/]</a></li>
/dede:channel
注意
currentstyle="<li class='hover'><a href='~typelink~' ~rel~>~typename~</a></li>"
这串函数就是代表当前栏目增加了一个class hover在css定义下就行了...本回答被提问者和网友采纳 参考技术B 会用jq不？追问

不会，如果你有详细代码贴出来看看嘛~

参考技术C 所以

jq 鼠标点击跳转页面后 改变点击菜单的样式代码

点击菜单跳转页面，然而跳转后的页面字体并没有加粗用如下代码

<div class="bg01 menu">
                    <img class="img01" src="../images/c_bg01.gif"   />
                     <ul>
                        <a href="x_bumen.php"><li>部门设置</li></a>
                        <a href="x_yhshezhi.php"><li>用户设置</li></a>
                         <a href="x_quanxian.php"><li>权限设置</li></a>
                         <a href="x_rizhi.php"><li class="img">日志管理</li></a>
                     </ul>
          </div>
        <script>
            $(document).ready(function(){
                $(".menu a").each(function(){
                    $this = $(this);
                    if($this[0].href==String(window.location)){
                        $this.addClass("active");
                    }
                });
            });

        </script>

给点击项添加样式