如何点击当前a标签就给当前标签加粗，加亮

假设html是这样

<div class="page">
    <div class="nav">
        <ul>
            <li class="nav-li"><a class="nav-li-a" href="#">A</a></li>
            <li class="nav-li"><a class="nav-li-a" href="#">B</a></li>
            <li class="nav-li"><a class="nav-li-a" href="#">C</a></li>
            <li class="nav-li"><a class="nav-li-a" href="#">D</a></li>
            <li class="nav-li"><a class="nav-li-a" href="#">E</a></li>
            <li class="nav-li"><a class="nav-li-a" href="#">F</a></li>
            <li class="nav-li"><a class="nav-li-a" href="#">G</a></li>
        </ul>
    </div>
</div>

21 个解决方案

#1

用javascript修改它的class

#2

.Page li:active
{
}

#3

加粗

$(function(){   $("a").click(function(){     $("a").removeClass("blod"); //删除所有A标签的blod样式     $(this).addClass("blod"); //添加当前A标签的blod样式   }); });

#4

引用 1 楼 bdmh 的回复:

用javascript修改它的class

正确，点击事件，更改它的样式

#5

$(function(){   
    $("a.nav-li-a").click(function(){  
        $(this).css(font-weight,"blod");
    })
   });

#6

引用 5 楼 Chinajiyong 的回复:

JavaScript code?123456$(function(){       $("a.nav-li-a").click(function(){          $(this).css(font-weight,"blod");    })   });

当击当前的标签确实是加粗了，但是换一个点击的话，之前点的还是属于加粗状态。。。

#7

引用 1 楼 bdmh 的回复:

用javascript修改它的class

如果要点击的标签加粗是因为里面有个span标签怎么办？

<li class="nav-li"><a class="nav-li-a" href="#"><span>A</span></a></li>

#8

#9

$(function () {
            $(".nav-li-a").each(function () {
                $(this).click(function () {
                    $(this).css("font-weight", "bold").parent().siblings().children().css("font-weight", "normal"); ;
                });
            });
        });

#10

$(function () {
            $(".nav-li-a").click(function () {
                $(this).css("font-weight", "bold").parent().siblings().children().css("font-weight", "normal"); 
            });
        });

修改了一下

#11

引用 10 楼 HurtSomebody 的回复:

JavaScript code?123456$(function () {            $(".nav-li-a").click(function () {                $(this).css("font-weight", "bold").parent().siblings().children().css("font-weight", "no……

哟西，可以实现。。。Thx

#12

用js就行了 改变ClassName就行了·

#13

还是会出现这种情况怎么解决 
刚才试了试10楼的

#14

估计你想要的是根据当前在哪个页面，然后对应的菜单就变粗吧，和点击没关系

#15

你可以定一个全局变量，放置上一个加粗的菜单对象，然后在点击菜单的时候，先把上一个加粗菜单恢复为正常字体，再加粗当前点击菜单

#16

谢谢 已经解决

#17

引用 16 楼 reasonhx 的回复:

谢谢 已经解决

晕死，都不分享解决方法的

@reasonhx 

#18

<div class="page">
    <div class="nav">
        <ul id="menu_ul">
            <li id="li1" class="nav-li"><a class="nav-li-a" href="#">A</a></li>
            <li id="li2" class="nav-li"><a class="nav-li-a" href="#">B</a></li>
            <li id="li3" class="nav-li"><a class="nav-li-a" href="#">C</a></li>
            <li id="li4" class="nav-li"><a class="nav-li-a" href="#">D</a></li>
            <li id="li5" class="nav-li"><a class="nav-li-a" href="#">E</a></li>
            <li id="li6" class="nav-li"><a class="nav-li-a" href="#">F</a></li>
            <li id="li7" class="nav-li"><a class="nav-li-a" href="#">G</a></li>
        </ul>
    </div>
</div>

var Current_SSLi="li1";
$("#menu_ul li").click(function(){
        $("#"+Current_SSLi).css("font-weight","thin");
        $(this).css("font-weight","bold");
        Current_SSLi=$(this).attr("id");
}

#19

以上用到了jquery,需要在页面中引用jquery。加亮的部分你自己加。

#20

引用 5 楼 Chinajiyong 的回复:

JavaScript code?123456$(function(){       $("a.nav-li-a").click(function(){          $(this).css(font-weight,"blod");    })   });

+++

#21