Показывать div при нажатии на ссылку - PullRequest
Новая
       33

Показывать div при нажатии на ссылку

0 голосов
/ 16 августа 2011

Использование mootools.js 1.3.2 и mootools-more.js

Насколько я могу судить, это должно раскрывать div, а также скрывать div content и linkTab одновременно. 

$('blogLink').addEvent('click', function(){
 $('homeLink').removeClass('active'); 
 $('linkTab').removeClass('active'); 
 $('blogLink').addClass('active');  
 content.slideOut();
 linkTab.slideOut();
 blogLink.slideIn();
});

Это HTML 

<a href="#" id="blogLink">Blog</a>
<div id="blogContent">
content here
</div>

Все работает правильно, и это нормально, но в дополнение к этому, я также хочу иметь возможность дать людям URL-адрес типа http://mysite.com/#blogLink и открыть этот div blogContent. Когда я делаю это сейчас, это приводит меня к началу страницы, и div blogContent скрыт.

Как мне этого добиться? Я попытался добавить mootools-smoothscroll.js и использовать метод, описанный здесь http://davidwalsh.name/smooth-scroll-mootools, но это просто сломало всю страницу - не загрузится должным образом.

У меня нулевой опыт работы с mootools и слабая работа с Javascript, поэтому, пожалуйста, извините, если я потрачу время на то, чтобы 'получить' то, что вы пытаетесь объяснить.

Большое спасибо.

1 Ответ

0 голосов
/ 16 августа 2011

Во-первых, вы особенно привязаны к MooTools? Если вы новичок в JavaScript, jQuery , вероятно, проще в использовании и определенно имеет большее сообщество поддержки. Но я опубликую решение, которое пока должно работать в MooTools:

Если я вас правильно понимаю, то, чего вы хотите добиться, это:

  • Анонимная функция, которую вы разместили, будет работать при нажатии на кнопку «Блог»
  • Функция также будет работать, если кто-то заходит на страницу с #blogLink в URL.

Это не так уж сложно достичь: 

// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
    // Check for #blogLink hashtag, and reveal blog
    if(window.location.hash == 'blogLink') { revealBlog(); }

    // Make sure blog is revealed when link is clicked
    $('blogLink').addEvent('click', revealBlog);
});

function revealBlog() {
    $('homeLink').removeClass('active'); 
    $('linkTab').removeClass('active'); 
    $('blogLink').addClass('active');  
    content.slideOut();
    linkTab.slideOut();
    blogLink.slideIn();
}

Вы также можете изменить разметку ссылки на: 

<a href="#blogLink" id="blogLink">Blog</a>

Чтобы убедиться, что они всегда находятся на правильной ссылке при открытии блога.

...