时间戳

首页 > 解决方案 > 根据单击的链接使用 jquery 编辑 div

jquery - 根据单击的链接使用 jquery 编辑 div

问题描述

我有一个导航栏，其中包含几个不同的 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 以反映当前页面并更改按钮？

谢谢

标签： jqueryhtmlcss

解决方案

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

例如

$(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;
  });
});

推荐阅读