Question

<div id="logo"><!-- logo -->
<a href="index.php" id="ajax_link">My Site</a>
</div><!-- end logo -->

<?php
if ($_SESSION['uid'] == "") 
    {
        echo "<div id='main_menu' class='log'>You are not logged in &bull; <a href='login.php'>Login</a><br \></div>";
        exit();
    }
else 
    {
        echo "
            <div id='main_menu'>
            <ul>
            <li class='bar'>&nbsp;</li>
            <li><a href='index.php' id='ajax_link'>Edit Site</a></li>
            <li class='bar'>&nbsp;</li>
            <li><a href='docs.php' id='ajax_link'>My Documents</a></li>
            <li class='bar'>&nbsp;</li>
            <li><a href='contacts.php' id='ajax_link'>Web Contacts</a></li>
            <li class='bar'>&nbsp;</li>
            <li><a href='social.php' id='ajax_link'>Social Media</a></li>
            <li class='bar'>&nbsp;</li>
            You are logged in as ".$_SESSION['username']." &bull; <a href='logout_parse.php'>Logout</a><br \>
            </ul>
            </div>
        ";
    }
?>

我已经建立了这个菜单系统（上面），我正在使用ajax和jquery来改变主要内容（下面），具体取决于所选的菜单项。

var hash = window.location.hash.substr(1);
    var href = $('#ajax_link').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-4)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });
    $('a').click(function(){                      
        var toLoad = $(this).attr('href')+' #content';
        $('#content').fadeOut('fast',loadContent);
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length);
        function loadContent() 
        {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() 
        {
            $('#content').fadeIn('normal');
        }
        return false;
    });

但是由于某种原因，这段代码也会影响登录和注销链接，我不希望这种情况发生。

我最近才添加#ajax_links来尝试修复此问题，因为我之前使用的是#main_menu ul li a和#logo a。

任何人都可以告诉我如何解决这个问题

Answer 1

首先，id属性应该是唯一的。将所有这些链接更改为使用类：

<li><a href='index.php' class='ajax_link'>Edit Site</a></li>

现在用它来改进选择器

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

和

$('.ajax_link').each(function(){
   ....

Javascript函数影响页面的其他区域而不是指定的

1 个答案: