Question

我最近开始在jquery工作。它应该很简单，但到目前为止我找不到解决方案。我正在尝试使用URL哈希标记导航幻灯片。我能够完成点击事件，但是当我尝试手动更改URL中的标记时，它会失败。它是页眉和页脚内的一个内容滑块。

我想要的是点击功能在URL哈希更改时运行并转到特定幻灯片。

$(document).ready(function () {
	var currentPage,
		pointer,
		slideMargin,
		contentPointer=1,
		sildeNum = $('.page').length,
		wrapperWidth = 100 * sildeNum,
		slideWidth = 100 / sildeNum;
	
	$(".wrapper").css({
    	width: wrapperWidth + '%'
	});
	
	$(".page").css({
    	width: slideWidth + '%'
	});
	

  $(".page-wrapper li").css("left", '100%');
  $(".page-wrapper li:nth-child("+contentPointer+")").css("left", '0%');

	
	$("a.scrollitem").click(function(){
		pointer=this.id;
		contentPointer=Number(pointer) + 1;
    

		$(".page-wrapper li").css("left", '100%');
		$(".page-wrapper li:nth-child("+contentPointer+")").css("left", '0%');
		
    $("a.scrollitem").removeClass("selected");
		$(this).addClass("selected");
		$(".page").removeClass("selected");
		$(".page-wrapper li:nth-child("+contentPointer+")").addClass("selected");
    return true;
	}); 

});

.wrapper {
  position: relative;
  background: #263729;
  z-index: 1;
  height: 100%;
  display: block; }

  .wrapper nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    z-index: 5;
    margin-left: auto;
    margin-right: auto;
    width: 33.3%; }

    .wrapper nav a {
      color: #FFFFFF; }

  .wrapper ul {
    height: 40%; }

    .wrapper ul li {
      position: absolute;
      background: #992213;
      min-height: 40%;
      padding-left: 5%;
      padding-right: 5%;
      float: left; }


#p1 {
  background: #0C717A; }

#p2 {
  background: #009900; }

#p3 {
  background: #0000FF; }

a {
  color: #FFF; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="wrapper">
     <nav>
        <a id="0"  href="#p1" class="scrollitem selected">page 1</a>
         <a id="1" href="#p2" class="scrollitem">page 2</a>
         <a id="2" href="#p3" class="scrollitem">page 3</a>
    </nav>
    <ul class="page-wrapper">
        <li id="p1" class="page selected">
            <h1>Content slide 1</h1>
        </li>
        
        <li id="p2" class="page">
            <h1>Content slide 2</h1>
        </li>
        
        <li id="p3" class="page">
            <h1>Content slide 3</h1>
        </li
   	></ul> 
</div>

Answer 1

我发现您已经在链接活动时添加了新的selected课程，如下所示。

$(this).addClass("selected");

因此，您只需要在拥有此selected课程时设置链接的样式。

/* find all selected links inside wrapper
   .wrapper is required to add specifity
   .wrapper .selected > .wrapper nav a
*/
.wrapper .selected{
  color : red;
}

/* setting some default styles for headings so that
   they won't inherit wrapper styles */
h1 {
  color : #fff;
}

这里有一个展示上述变化的Pen。

Answer 2

根据W3Schools，人们普遍支持onhashchange事件。

这意味着可以安全地将$("a.scrollitem").click(function(){...}替换为： -

$(document).on('hashchange', function() {
    pointer = 1*location.hash.substr(2) // remove leading '#p'

    $(".page-wrapper li")
    .css("left", '100%')
    .removeClass("selected")
    .eq(pointer)
    .css("left", '0%')
    .addClass("selected")

    $("a.scrollitem")
    .removeClass("selected")
    .eq(pointer)
    .addClass("selected")
})

if (location.hash.length)
    $(document).trigger('hashchange')

在URL哈希更改上应用CSS类

2 个答案: