Question

有人可以帮助windows.location.hash和.cycle脚本。我已经尝试了好几个星期而且我不能这样做，我正在学习兼职的javascript，而且我没有能力在没有一些帮助的情况下完成这项工作。

这是我的html代码

<div id="home_slide" class="slide">
  <li class="header"><a href="#" class="goToSlide" data-jim="#about_us_slide">About us</a></li>
  <li class="header"><a href="#" class="goToSlide" data-jim="#contact_us_slide">Contact us</a></li>
  <li id="back"><a href="#" class="prev_demo" data-jim="#home_slide">Home</a></li>
</div>

<div id="about_us_slide" class="slide">
  <li class="header"><a href="#" class="goToSlide" data-jim="#about_us_slide">About us</a></li>
  <li class="header"><a href="#" class="goToSlide" data-jim="#contact_us_slide">Contact us</a></li>
  <li id="back"><a href="#" class="gohome" data-jim="#home_slide">Home</a></li>
</div>

<div id="contact_us_slide" class="slide">
  <li class="header"><a href="#" class="goToSlide" data-jim="#about_us_slide">About us</a></li>
  <li class="header"><a href="#" class="goToSlide" data-jim="#contact_us_slide">Contact us</a></li>
  <li id="back"><a href="#" class="gohome" data-jim="#home_slide">Home</a></li>
</div>

继承我的CSS代码

<style type='text/css'>
#container {
width: 320px;
height: 417px;

}
#nav li {
float: left;
}
#nav li a {
display: block;
border: 1px solid #333;
background: #eee;
}
#slide_containers {
clear: both;
border: 1px solid #333;
background: #eee;
}
.slide {
width: 100%;
}
#about_us_slide {
background: #cea;
width: 320px;
height: 417px;
}
#contact_us_slide {
background: #fea;
width: 320px;
height: 417px;
}

</style>

最后这里是我的javascript代码 //

$('.goToSlide').click(function(e) { 
// Bind click event to all elements with the class goToSlide
e.preventDefault();
var selector = $(this).data('jim'); // Get the data-slide attribute value
//console.log(selector, $(selector), $(selector).index()); // DEBUG
var slideIndex = $(selector).index(); // Get the index of the slide element
$('#slide_containers').cycle(slideIndex); // Cycle to slide by index
});});
//]]>  
</script>

这里也是代码工作的一个方面 http://jsfiddle.net/mYmrx/16/

我要做的是拥有我的域名，即www.domain.com＃about_us，甚至更好的是www.domain.com/about_us

请有人帮助我，我会发疯。

Answer 1

你很亲密。您可以将window.location.hash设置为“selector”变量，以获得您所要求的内容。您甚至可以在使用promise和done完成动画后完成此操作。这是一个例子：

$(function() {
    $('#slide_containers').cycle({
        fx: 'scrollLeft',
        speed: 'fast',
        timeout: 0,
        prev: ".prev_demo",
    });

    // Bind click event to all elements with the class goToSlide
    $('.goToSlide').click(function(e) {
        e.preventDefault();
        // Get the data-slide attribute value
        var selector = $(this).data('jim');
        // Get the index of the slide element
        var slideIndex = $(selector).index();
        $('#slide_containers').cycle(slideIndex);
        // wait for animation to complete
        var promise = $('.slide').promise();
        promise.done(function() {
            // set hash
            window.location.hash = selector;
        });
    });

    //Grab hash off URL (default to first tab) and update
    $(window).bind("hashchange", function(e) {
        var anchor = $(location.hash);
        if (anchor.length === 0) {
            $('#slide_containers').cycle(0);
        }
        var slideIndex = $(anchor).index();
        $('#slide_containers').cycle(slideIndex);
    });
});

这是更新后的JSFiddle：http://jsfiddle.net/infiniteloops/AHATV/8/

在这里，您可以看到JSFiddle的运行情况（包含更新的哈希位置）：http://jsfiddle.net/infiniteloops/AHATV/8/show/

使用.cycle脚本更改window.location.hash

1 个答案: