Question

我有一个导航栏，其中包含几个不同的div，我想根据刚刚单击的链接进行更改

    <script>
    $(document).ready(function (){

      $("#content").load("content/index_content.php");
      $('a').click(function(){
        $('#content').load($(this).attr('href'));
        $('#nav_' + 'a' + "active");
        return false;
      });
    });
    </script>

    <span id="nav">
        <a href="content/index_content.php"><div id="nav_home_active></div></a><a href="content/news_content.php"><div id="nav_news"> 
    </div></a>
    <a href="content/staff_content.php"><div id="nav_staff"></div></a>
    <a href="stats.php"><div id="nav_stats"></div></a>
    <a href="content/contact_content.php"><div id="nav_contact"></div> 
    </a>
    </span>

我能想到的jquery块中的第7行很显然是行不通的。如何将“活动”一词连接到现有的div上以反映当前页面并更改按钮？

谢谢

Answer 1

您可以在jQuery事件处理程序中使用$(this)来引用事件处理程序要响应的元素。

例如

$(document).ready(function (){
  $("#content").load("content/index_content.php");

  $('a').click(function(){
    $('#content').load($(this).attr('href'));

    $(this).addClass('active').siblings().removeClass('active');

    return false;
  });
});

这会将类active添加到所单击的链接中，并从所有同级中删除相同的类。然后，您可以使用a.active来引用活动链接。

编辑

抱歉-意识到您正在尝试编辑div，而不是链接。

您可以在处理程序中使用$(this).children('div')来访问单击的链接中的div。

$(document).ready(function (){
  $("#content").load("content/index_content.php");

  $('a').click(function(){
    $('#content').load($(this).attr('href'));

    $(this).addClass('active').siblings().removeClass('active');

    $(this).children('div').addClass('active');

    return false;
  });
});

Answer 2

此代码将完成这项工作：

 $(document).ready(function (){

      $("#content").load("content/index_content.php");

      $('a').click(function(){
        $('#content').load($(this).attr('href'));

        let newId = $(this).children("div").attr("id") + "_active";
        $(this).children("div").attr("id", newId);

        return false;
      });

    });

但是，当您单击另一个链接时，您可能想从链接中删除所有“ _active”。使用id可能有点棘手。我相信您对`nav_home`和`nav_home_active`有不同的CSS规则。如果是这种情况，在这里上课将更合适。只需创建“活动”类并分配所需的CSS。添加或删除此类。

这里是示例：

 $(document).ready(function(){

      $("#content").load("content/index_content.php");

      $('a').click(function(e){

        // prevent the page from jumping to another place
        e.preventDefault(); 

        // remove class active from all divs inside <span id="nav">
        $("#nav div").removeClass("active");

        // add class active to link you clicked 
        $(this).children("div").addClass("active"); 

        $('#content').load($(this).attr('href')); 


      });

    });

使用jquery编辑div，具体取决于单击的链接

2 个答案: