навигация с помощью JavaScript

Question

так что я новичок и мне очень нужна помощь поэтому я написал эту функцию здесь; цель состояла в том, чтобы взять в качестве параметров имя элемента, селектор тега 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 под ссылками навигации, которые содержат ссылки, но я не могу найти, как это сделать кто-нибудь из профессионалов имеет какие-либо идеи ???

Answer 1

Я могу помочь, но это будет довольно переписать.

Во-первых, присвойте всем своим элементам навигации класс. Внутри элементов навигации (я не знаю, являются ли они элементами div, li или чем-то еще, поместите тег <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, а не вызывать функцию навигации 3 раза. Вы получаете src от дочернего тега <a> li, на который нажали.

$(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; важен для предотвращения действия ссылки по умолчанию (т. Е. Отправки пользователя на другую страницу).

Answer 2

Существует несколько способов сделать ссылку неактивной.Один из них - позволить событию клика отменить привязку:

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

Другой вариант - манипулировать его CSS, чтобы скрыть элемент (установите display в none).

КакЧто касается второй части вашего вопроса, я не совсем понимаю, что вы хотите сделать.Если вы хотите иметь всплывающее окно по ссылке, которое активируется при наведении, вы можете увидеть здесь, как этого можно достичь, используя <ul> и его :hover событие

http://jsfiddle.net/D3AP2/