Question

好的，我在这里疯了！为什么这不起作用!!我正在尝试添加一类活动到顶级菜单导航...所以我的菜单将是关于，新闻，业务等按钮。这是菜单的html：

<ul id="topnavtwo">
   <li>
       <a href="/CoVPrototype/about.php" class="about_pg">About Vancouver</a>
            <div class="sub">
                <ul class="lonesome_group">

                    <li><h2><a href="#">History</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Geography</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Things To Do</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Population</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Weather</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Education</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Health</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Cemetery</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                </ul>
                <ul>
        <li>
            <a href="/CoVPrototype/news.php" class="news_pg">In The News</a>
            <div class="sub">
                    <ul style="width: 160px;">
                        <li><h2><a href="#">Special Events</a></h2></li>
                        <div class="short_ul"><hr /></div>
                        <li><h2><a href="#">Media Resources</a></h2></li>
                        <div class="short_ul"><hr /></div>
                        <li><h2><a href="#">Archive</a></h2></li>
                        <div class="short_ul"><hr /></div>
                    </ul>
                </div>
        </li>

<!--Mega Menu Section-->
            <a href="/CoVPrototype/business.php" class="doing_business_pg">Doing Business</a>
              <div class="sub_bus">
                    <ul class="lonesome_group">

                        <li><h2><a href="#">Economic Development</a></h2></li>
                        <div class="lonesome_link_ul"><hr /></div>
                        <li><h2><a href="#">Taxes</a></h2></li>
                        <div class="lonesome_link_ul"><hr /></div>
                    </ul>

                    <ul style="width: 160px;">
                        <li><h2>Business Assistance</h2></li>
                        <div class="short_ul"><hr /></div>
                        <li><a href="#">Doing Business With The City</a></li>
                        <li><a href="#">Starting a new Business</a></li>
                        <li><a href="#">Incentives</a></li>
                        <li><a href="#">Information and Rules</a></li>
                    </ul>

                    <ul style="width: 160px;">
                        <li><h2>Liscence And Permits</h2></li>
                        <div class="short_ul"><hr /></div>
                        <li><a href="#">Types of Business Licenses</a></li>
                        <li><a href="#">Apply for Business License</a></li>
                        <li><a href="#">Pay &amp; Manage Business </a></li>
                        <li><a href="#">License</a></li>
                        <li><a href="#">TV, Radio &amp; Film</a></li>
                        <li><a href="#">Retail Sidewalk</a></li>
                        <li><a href="#">Permits</a></li>
                    </ul>

                    <ul style="width: 160px;">
                        <li><h2>Opportunities With<br /><br /><br /><br />The City</h2></li>
                        <div class="short_ul"><hr /></div>
                        <li><a href="#">Bids</a></li>
                        <li><a href="#">Contacts Awarded</a></li>
                        <li><a href="#">Ethical Purchasing Policy</a></li>
                        <li><a href="#">Purchase Order Items</a></li>
                    </ul>

                     <ul style="width: 160px;">
                        <li><h2>Walking</h2></li>
                        <div class="short_ul"><hr /></div>
                        <li><a href="#">Routes &amp; Maps</a></li>
                        <li><a href="#">Neighbourhoods</a></li>
                        <li><a href="#">Green Streets</a></li>
                        <li><a href="#">Initiatives</a></li>
                    </ul>
            </div>
        </li>
    </ul>

我的JQuery就像这样：

<script type="text/javascript">
    $(document).ready(function() {
        $('#topnavtwo li a').click(function() {
          $('topnavtwo li a').addClass('active');
        });
     });
    </script>

我不明白，不应该这样做吗?? !!

Answer 1

你错过了第二个选择器中的'＃'。

您应该用$（this）

替换第二个选择器

<script type="text/javascript">
    $(document).ready(function() {
        $('#topnavtwo li a').click(function() {
          $(this).addClass('active');
        });
     });
    </script>

Answer 2

<script type="text/javascript">
$(document).ready(function() {
    $('#topnavtwo li a').click(function() {
        $('#topnavtwo li a').addClass('active'); // Look at this line
        // Or replace it with (without the //):
        // $(this).addClass('active');
    });
});
</script>

查看点击处理程序中的评论。

Answer 3

这应该有效（缺少哈希）：

$('#topnavtwo li a').addClass('active');

Answer 4

你忘记了剧本第4行的＃

Answer 5

在没有#s的情况下帮助进步。

首先询问它，您只需通过Firebug（在Firefox中）或Chrome中的开发人员菜单中检查您的代码。

另一种解决方案，如果您在javascript中的所有事件之后发出警告，例如：

<script type="text/javascript">
$(document).ready(function() {
    alert("document.ready.function");
    $('#topnavtwo li a').click(function() {
    alert("the click was okay");
        $('topnavtwo li a').addClass('active');
        alert("a has class active");
    });
});
</script>

所以你可以看到代码破坏的时间。或者稍后你可以试着抓住一切。

try {
var tmp = doSomething();
if (tmp == something.errorCondition)
throw new Error("Error condition in X");
} catch(err) {
//handle ((err && err.message) || err.toString())
}

使用JQuery添加活动类应该像这样工作，对吧？

5 个答案: