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");
}

在所选菜单项上添加类

3 个答案: