jquery - Jquery：单击时菜单处于活动状态

Question

我创建菜单：

<ul id="menu">
    <li>                
        <a href="#" onclick="load(1);return false;"> Team Install</a> 
    </li>
    <li>                
        <a href="#" onclick="load(2);return false;"> PC and Laptop Service</a>
    </li>
    <li>                
        <a href="#" onclick="load(3);return false;"> Web Design and Internet Services</a>
    </li>
    <li>                
        <a href="#" onclick="load(4);return false;"> Software and Database Dev.</a>
    </li>
 </ul>
 <div id="LoadMe"></div>

这就是我在 jquery 中所做的：

<script type="text/javascript">

    $(document).ready(function () {
        $("#LoadMe").load('/Service2.html');
        $('#menu a[href="' + url + '"]').addClass('selectedcategoryServices');
    });

    function load(num) {
        $("#LoadMe").load('/Service' + num + '.html');
    }

</script>

但是当我点击它时菜单没有selectedcategoryServices准备好，谁能告诉我我该怎么做？

Answer 1

试试这个方法

$("a").click(function(){
     $("a.selectedcategoryServices").removeClass("selectedcategoryServices");
     $(this).addClass('selectedcategoryServices');

 });

检查这个演示

Answer 2

我添加了href属性的 url 并onclick从您的标记中删除。

<ul id="menu">
    <li>
        <a href="/Service1.html"> Team Install</a>
    </li>
    <li>
        <a href="/Service2.html"> PC and Laptop Service</a>
    </li>
    <li>
        <a href="/Service3.html"> Web Design and Internet Services</a>
    </li>
    <li>
        <a href="/Service4.html"> Software and Database Dev.</a>
    </li>
</ul>
<div id="LoadMe"></div>

.

使用此标记，您可以使用它来实现您正在寻找的效果

$(document).ready(function () {
    $("#menu a").click("on", function(ev) {
        ev.preventDefault();

        load($(this).attr("href"));
    });
});

function load(url) {
    $("#LoadMe").load(url, function() {
        $("#menu").find("a[href=\"" + url + "\"]").addClass("selectedcategoryServices");
    });
}

仅供参考：不显眼的 Javascript :)