用javascript导航

时间:2011-07-29 05:24:22

标签: javascript jquery ajax

所以我是一个乞丐,我真的需要帮助 所以我在这里写下了这个功能; 目标是将元素名称,div标签选择器和php文件地址作为参数,

function navigation($nav,$container,$link)
{ 


 $($nav).click(function(){
    $($container).slideUp(500,function(e){
    $(this).append("<span>");
    $(this).load($link);
    });
  });
  {
  $($container).ajaxComplete(function(){
  $(this).slideDown(500);
});
  }
  {
    $($container).slideUp(500);
  }
}

用法很简单

    navigation("#home",".content","home.php");
   navigation("#about",".content","about.php");
    navigation("#store",".content","right.php");

html只是少数<div>一个class=".content"标记和<a>链接,名为#home #about #store,php中的页面只是普通的HTML内容;


现在的问题是,当我点击它工作的链接但我可以找到如何让他活跃的链接在它变得活跃后不可点击 我正要做一个具有相同功能的子列表,试图在包含链接的导航链接下加载一个小div但我无法找到怎么做 任何一个职业选手都有任何想法???

2 个答案:

答案 0 :(得分:1)

我可以提供帮助,但这将是一次重写。

首先,将所有导航项目分类。在导航项目内(我不知道它们是divli元素还是其他内容,将<a>标记与src设置到您希望导航加载的页面完成后,它可能如下所示:

<ul id="navigation">
    <li class="nav">
        <a src="home.php">HOME</a>
    </li>
    <li class="nav">
        <a src="about.php">ABOUT</a>
    </li>
    <li class="nav">
        <a src="right.php">RIGHT</a>
    </li>
</ul>

然后使用jQuery的onload功能绑定click事件onload,而不是调用导航功能3次。您从点击<a>的子li标记中获取src。

$(function()
{
    $('.nav').click(function()
    {
        if($(this).hasClass('active'))
        {
            return false;
        }
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');

        $('.content').slideUp(500).load($(this).children('a').attr('src'), 
            null,
            function(){$(this).slideDown(500);}
        );
        return false;
    });
});

请注意,return false;对于阻止链接的默认操作非常重要(即将用户发送到其他页面)。

答案 1 :(得分:0)

有几种方法可以使链接无法点击。一种方法是让click-event解除绑定:

$('nav')click(function(){
//Your code goes here
$(this).unbind('click');
});

另一种方法是操纵其CSS来隐藏元素(将display设置为none)。

至于你问题的第二部分,我真的不知道你想做什么。如果您希望在链接下方有一个弹出窗口,则会在悬停时激活,您可以在此处看到如何使用<ul>及其:hover事件

来实现这一目标

http://jsfiddle.net/D3AP2/