代码之家 › 专栏 › 技术社区 › Sindre Sorhus

使用jquery实现向上滑动和标签的最佳方法

slideup fade tabs jquery javascript

Sindre Sorhus · 技术社区 · 16 年前

我正在创建一个顶部有图像,下面有菜单的页面。当用户单击3个菜单按钮时,图像向上滑动,页面向下滚动,使菜单位于页面顶部,然后右侧的.content div淡入。只有当用户第一次单击按钮时,才会出现向上滑动。

用jquery实现这一点的最佳方法是什么? (没有插件)

我还需要知道,如果我单击同一个按钮两次,如何才能防止它在已经可见的页面中褪色?

我在用雷尔而不是 HREF ,因为href使页面跳转,即使 返回假 .

这就是我目前为止所拥有的:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    imgVisible = true;

    $('#mainmenu a').click(function(){
        var $activeTab = $(this).attr('rel');
        if(!imgVisible){
            $('html:not(:animated),body:not(:animated)').animate({scrollTop:$('#mainmenu').offset().top-20},500);
            $('.content').hide();
            $($activeTab).fadeIn();
        } else{
            $('#imgholder').slideUp(500,function(){
                imgVisible = false;
                $('#mainmenu a[rel="'+$activeTab+'"]').click();
            });
        }
        return false;
    });

});
</script>

<div id="imgholder"><img src="image.jpg" /></div>

<div id="mainmenu">
    <ul>
        <li><a rel="#tab1"></a></li>
        <li><a rel="#tab2"></a></li>
        <li><a rel="#tab3"></a></li>
    </ul>
</div>

<div id="container">

    <div class="content" id="tab1">
        content
    </div>


    <div class="content" id="tab2">
        content
    </div>


    <div class="content" id="tab3">
        content 
    </div>

</div>

3 回复 | 直到 16 年前

Peter Mortensen Pieter Jan Bonestroo 16 年前

下面的代码实现了您需要的功能:

$('#mainmenu a').click(function(){  
    var myrel=$(this).attr('rel');
    $('.content:not([id='+myrel+'])').hide();
    $('#imgholder').slideUp(500,function(){         
        $('#'+myrel).fadeIn();
    });         
});

....
    <li><a href='#' rel='tab0'></a></li>

我已经从你的rel='牌上去掉了“”号;-)

我不知道你为什么要滚动页面。当用户单击菜单时,他/她已经将其聚焦(因此在当前视区内可见)。但是你有一个非常大的顶像吗?如果是这样,请告诉我,我将修改代码片段。(仍然取决于页面首次加载时菜单下方可见的内容量。)

此外,对于 SEO 您可能希望使用href而不是rel属性并创建单独的内容保持页的原因。下面的代码段将删除导航操作。

$('#mainmenu a').each(function(){
    var myhref = $(this).attr('href');
    $(this).attr('href','#').attr('rel',myhref);
}).click(function(){
    var myrel=$(this).attr('rel');
    $('.content:not([id='+myrel+'])').hide();
    //....etc

Phill Pafford 16 年前

我认为这是一个很好的例子,说明你在寻找什么: Organic Tabs

Corey Ballou 16 年前

var imgVisible = true;
var $activeTab, $lastTab;
var $mainmenu = $('#mainmenu');
var offset = $mainmenu.offset().top - 20;

$mainmenu.find('a').click(function() {

    $activeTab = $($(this).attr('rel'));

    if (!imgVisible) {
        // dont fire any events if already open
        if ($lastTab.attr('id') == $activeTab.attr('id')) return false;
        $lastTab.fadeOut('normal', function() {
            $activeTab.fadeIn(500, function() {
                $lastTab = $activeTab;
            });
        });
    } else {
        $('#imgholder').slideUp(500, function() {
            imgVisible = false;
            window.scrollTo(0, offset);
            $activeTab.fadeIn(500, function() {
                $lastTab = $activeTab;
            });
        });
    }

    return false;

});

我强烈建议增加 <a href="#"> 因为这样做不会使页面在正确完成时跳转,并确保对锚链接进行验证。有人告诉我,如果我错过了什么,可以很快解决(或者,如果你有一个优化或改进,你可以为我做)。