jquery - 在选定的菜单项上添加一个类

Question

我有一个菜单。

     <div id="ReportMenu" class="left-box" style = "width: 250px;">
            <p class="section-title">
               <span>Select Report : </span>
            </p>
               <ul id="left-box" class="menu-left-box">
                    <li id="menu_1" class="selected"><a href="#"  onclick="getPartial(1);">A</a></li>
                    <li id="menu_2"><a href="#" onclick="getPartial(2);">B</a></li>
                    <li id="menu_3"><a href="#" onclick="getPartial(3);">C</a></li>
                    <li id="menu_4"><a href="#" onclick="getPartial(4);">D</a></li>                      
    </ul>   
     </div>

当用户单击该菜单项时，我需要将菜单项设为粗体。当用户单击其他菜单项时，应删除前一个菜单项上的类。我将不得不在 getPartial() 方法中编写 Jquery 代码。

我怎样才能做到这一点？

谢谢，马库斯

Answer 1

嗨，现在你可以jquery像这样使用函数

现场演示 http://jsfiddle.net/Ef365/1/

HTML

<div id="ReportMenu" class="left-box" style = "width: 250px;">
            <p class="section-title">
               <span>Select Report : </span>
            </p>
               <ul id="left-box" class="menu-left-box">
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>                      
    </ul>   
     </div>

CSS

.selected{
font-weight:bold;
    font-size:45px;

}

jQuery

$(document).ready(function() {

        $("#left-box > li").click(function(){
        $("#left-box > li").removeClass('selected');
            $(this).addClass('selected');

        })


});

现场演示 http://jsfiddle.net/Ef365/1/

Answer 2

function getPartial(variable)
{$(".menu-left-box li").css("font-weight","normal");
$(".menu-left-box li:eq("+(variable-1)+")").css("font-weight","bold");
}

Answer 3

尝试这个。

function getPartial(n) {
    $(".menu-left-box li a").css("font-weight","normal");
    $(this).css("font-weight","bold");
}