在另一个页面“Hash”上打开Jquery Div

发布于 2024-11-03 00:31:47 字数 1482 浏览 0 评论 0原文

我想通过使用链接在不同页面上打开一个 div。

链接如下所示:grid.html#project1 / 2 / 3 / 4 等。

代码在目标页面上如下所示:

    $(function(){



    // Thumbs
    $('#thumbs a').hover(function(){
        $(this).find('span').stop(true, true).animate({'top': '90px'}, 300)
    },  function(){
        $(this).find('img').stop(true, true).animate({}, 300);
        $(this).find('span').stop(true, true).animate({'top': '124px'}, 300)
    })  .bind('click', function(){
        $('#content .project').stop(true, true).fadeOut(500);
        $($(this).attr('href')).stop(true, true).css('left', 0).fadeIn(500);

        $('#content').animate({'min-height' : '450px', 'display' : 'inline', 'position' : 'relative', 'paddingTop' : '-2px' , 'paddingBottom' : '130px'}, 500); 

        $('#thumbs').animate({'marginTop' : '30px'}, 500);
        $('html,body').animate({scrollTop:0}, 500); 


        return false;
    });

  $(".close").click(function() {
        $('#content .project').fadeOut(500);
        $('#content').animate({'min-height' : '0px', 'display' : 'inline', 'position' : 'relative', 'paddingTop' : '0px' , 'paddingBottom' : '0px'}, 500); 
  });   

    // Carousel
    $('.carousel').jcarousel({
        scroll: 1,
        animation: 800,
        easing: 'easeOutQuart', 
        buttonNextHTML: '<div><div></div></div>',
        buttonPrevHTML: '<div><div></div></div>',
        initCallback: initCarousel
    });



});

I want to open a div on a different page by using a link.

The links look like this: grid.html # project1 / 2 / 3 / 4 etc..

The code looks like this on the target page:

    $(function(){



    // Thumbs
    $('#thumbs a').hover(function(){
        $(this).find('span').stop(true, true).animate({'top': '90px'}, 300)
    },  function(){
        $(this).find('img').stop(true, true).animate({}, 300);
        $(this).find('span').stop(true, true).animate({'top': '124px'}, 300)
    })  .bind('click', function(){
        $('#content .project').stop(true, true).fadeOut(500);
        $($(this).attr('href')).stop(true, true).css('left', 0).fadeIn(500);

        $('#content').animate({'min-height' : '450px', 'display' : 'inline', 'position' : 'relative', 'paddingTop' : '-2px' , 'paddingBottom' : '130px'}, 500); 

        $('#thumbs').animate({'marginTop' : '30px'}, 500);
        $('html,body').animate({scrollTop:0}, 500); 


        return false;
    });

  $(".close").click(function() {
        $('#content .project').fadeOut(500);
        $('#content').animate({'min-height' : '0px', 'display' : 'inline', 'position' : 'relative', 'paddingTop' : '0px' , 'paddingBottom' : '0px'}, 500); 
  });   

    // Carousel
    $('.carousel').jcarousel({
        scroll: 1,
        animation: 800,
        easing: 'easeOutQuart', 
        buttonNextHTML: '<div><div></div></div>',
        buttonPrevHTML: '<div><div></div></div>',
        initCallback: initCarousel
    });



});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

余生共白头 2024-11-10 00:31:47
var hash = window.location.hash;
var yourDiv = $('#content .'+hash);
var hash = window.location.hash;
var yourDiv = $('#content .'+hash);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文