Question

我正在尝试使用ajax创建一个在div #main中加载了一些内容的网站，但我无法为菜单中的所选项目定义当前类。

    <nav id="menu">
      <ul>
        <li>
          <a href="pages/qui.php" 
             rel="address:/Qui" 
             title="Qui suis-je?" 
             class="qui ajax">
             Qui suis-je? &nbsp;&nbsp;
          </a>
        </li>
        <li>
          <a href="pages/portfolio.php" 
             rel="address:/portfolio" 
             title="Portfolio" 
             class="portfolio ajax">
             Portfolio &nbsp; &nbsp;
          </a> 
        </li>
        <li>
          <a href="pages/contact.php" 
             rel="address:/contact" 
             title="Contact" 
             class="contact ajax">
             Contact &nbsp; &nbsp;
          </a>
        </li>
      </ul>
    </nav>

我正在使用asual jquery插件来启用用户返回按钮（也许有一种方法可以使用此插件来定义菜单中点击的当前元素，在jquery中）

所以...我在jquery中一点也不擅长，所以如果有人可以提供帮助，那就太好了。

Answer 1

所以，如果我找对你，你想找出点击菜单中的当前按钮吗？

$(document).ready(function(){
    $('.ajax').click(function(){
        if($(this).hasClass('qui')) {
            alert('qui was clicked');
        }

        if($(this).hasClass('portfolio')) {
            alert('portfolio was clicked');
        }


        if($(this).hasClass('contact')) {
            alert('contact was clicked');
        }
    });
});

在此示例中，菜单按钮由类区分，这肯定不是最佳方法。但是你明白了如何识别被点击的按钮。

但是，如果你不想操纵按钮（例如添加/删除CSS）但只想发出请求就足够了：

$(document).ready(function(){
    $('.ajax').click(function(event){
        event.preventDefault(); //prevent the <a> tag from calling its href

        //check which button we are dealing with (see example above)
        if($(this).hasClass('portfolio')) {
            alert('portfolio was clicked');
            //we can add a css-class
            $(this).addClass('portfolio-hover');
            //or we can add single css-attributes:
            $(this).css('background-color', 'red');
        }

       var page_to_be_loaded = $(this).attr('href');
        $.get(page_to_be_loaded, function(data) {
            //data contains everything that the called php-file has outputted
            $('#main').html(data);
        });
    });
});

看看jQuery Documentation。您还应该为链接添加一个ID，这样您就可以准确识别它们：

<li>
  <a href="pages/qui.php"
     id="nav_qui"
     rel="address:/Qui" 
     title="Qui suis-je?" 
     class="qui ajax">
     Qui suis-je? &nbsp;&nbsp;
  </a>
</li>

//....
if($(this).attr('id')=='nav_qui') {
  alert('qui was clicked');
}
//....

Answer 2

导航后，添加

<div id="content"></div>

并添加以下jquery：

$(".ajax").click(function(e) {
    e.preventDefault();
    $.get($(this).attr("href"), function(data) {
        $('#content').html(data);
    });
});

使用ajax进行菜单导航

2 个答案: