javascript - 从链接菜单中单击链接时发布变量

Question

我有 3 个链接 i 菜单。单击链接时我会发布他们的 ID:

fiddle :Fiddle

html:

            <div class="home-content">
                <div class="menu-bar">
                        <ul class="nav nav-tabs">
                          <li class="active" id="top_picks"><a href="#">Top Picks<sup>beta</sup></a></li>
                          <li><a href="#" id="popular">Popular<sup>beta</sup></a></li>
                          <li><a href="#" id="analysis">Friends analysis</a></li>
                        </ul>
                        <p class="custom-alert">Article changes everyday! come back for more fun......</p>
                </div>
            </div>
<div class="articleContent">This content changes when link is clicked</div>

JS:

$(function () {
    $(".menu-bar li a").click(function () {
        var category = $(this).attr('id');
        $(".active").removeClass("active");
        $(this).parent().addClass("active");

        //$('label').css('color', selText);
        // When user clicks o "top picks" then it does not post category to ivite_db.php
            $.ajax({
                    url: "invite_db.php",
                    type: "POST",
                    data: {"link_menu": category},
                    success: function(data) {
                        $(".articleContent").html(data);
                    }
                });           
        });
    });

当点击popular 和analysis 链接时，代码工作正常。但是当点击 top_picks 链接时，它不会发布类别？

有什么问题吗？

Answer 1

您应该将 ID 放在 a 元素中，而不是 li 中，试试这个:

<li class="active"><a href="#" id="top_picks">

Fiddle