Question

使用mootools.js 1.3.2和mootools-more.js

据我所知，这应该是显示div并同时隐藏内容和linkTab div。

$('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>

一切正常，没关系，但除此之外，我还希望能够为人们提供像http://mysite.com/#blogLink这样的网址，并打开blogContent div。当我现在这样做时，它会将我带到页面顶部并隐藏blogContent div。

我该如何做到这一点？我确实尝试添加mootools-smoothscroll.js并使用此处列出的方法http://davidwalsh.name/smooth-scroll-mootools，但这只是打破了整个页面 - 无法正确加载。

我没有使用mootools的经验和Javascript的弱点所以请原谅我，如果我花一点时间'得到'你想要解释的。

非常感谢。

Answer 1

首先，您是否特别关注MooTools？如果你是一个JavaScript新手，jQuery可能更容易使用，肯定有一个更大的支持社区。但我现在发布一个应该在MooTools中运行的解决方案：

如果我理解正确，您希望实现的目标如下：

您发布的匿名函数将在点击“博客”时运行
如果有人访问了网址中包含#blogLink的网页，该功能也会运行。

这并不难实现：

// 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>

确保在博客显示时，他们总是在正确的链接上。

单击链接时显示div

1 个答案: