使用JQ实现导航菜单高亮(区别其他未激活的导航菜单)显示

首先在html头引用jq(我还引用了bootstrap,不过它的引用与否不影响结果).

第一种方法:

                        1:     html部分代码   

                     

                        2: js代码

                            第三行代码表示选中所有含 类 test-btn 的元素,并且使用each()实行遍历操作, 为所有被选中的元素创建一个函数,

                            第四行使用this选中被点击的元素(该元素是隶属于第三行已选中的元素)并为其创建函数

                            第四行使用addClass()为点击的元素添加一个active类(由于我已经应用了bootstrap,所以可以直接使用该类,否则 要自己编写), 同时使用siblings().removeClass 表示选中除了被点击元素之外的同胞元素,并去除active类

                        

第二种方法(仅作为抛砖引玉,有兴趣的的话可以深究一下)

                    javascript代码

                    该代码主要使用的是location.href函数来获得当前页面的链接,通过分析比对(使用正则是个很好的选择)该链接来确定是否添加或者移除active 类(我觉得只要能够使用js获得我们想要获得的字符串,就可以通过循环,判断来实现我们想要做的)

                                   

                                       

*********如果使用php建站,还可以使用php代码来实现该功能,如果脑洞再大一点,可以通过php调用数据库来实现active类的添加或移除,虽然没有必要,但是尝试一下也是不错的)

*******完