javascript - 是否可以通过 URL 直接转到 div 的内容？

Question

内容是用上一个和下一个按钮显示的，但是可以直接用链接显示框的内容吗？

例如：

https://example.com/content/#/2

那么第二个框可以显示内容吗？

$(document).ready(function() {
  $('#next').click(function() {
    if ($('.active').next('.case').length) {
      $('.active').removeClass('active')
        .next('.case')
        .addClass('active');
    }
  });
  $('#prev').click(function() {
    if ($('.active').prev('.case').length) {
      $('.active').removeClass('active')
        .prev('.case')
        .addClass('active');
    }
  });
});

.case {
  display: none
}

.active {
  background: yellow;
  border: 1px solid;
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="next">
  <h1>next</h1>
</div>
<div id="prev">
  <h1>prev</h1>
</div>
<div id="box1" class="case active">content 1</div>
<div id="box2" class="case">content 2</div>
<div id="box3" class="case">content 3</div>

我做了什么？

if($(location).attr('hash') != null) {
        document.getElementById('box' + $(location).attr('hash').replace("#", "")).style.display = 'block';
    }

但它没有用

更新 1

我变了：

if($(location).attr('hash') != null) {
        document.getElementById('box' + $(location).attr('hash').replace("#/", "")).style.display = 'block';
        document.getElementById('box' + $(location).attr('hash').replace("#/", "")).addClass('active');
    }

结果，没用

JSFiddle 演示

如果可能的话，你能指导我吗？

标签： javascriptjqueryhtml

Answer 1

尝试这个：

$(document).ready(function() {
  $('#next').click(function() {
    if ($('.active').next('.case').length) {
      $('.active').removeClass('active')
        .next('.case')
        .addClass('active');
    }
  });
  $('#prev').click(function() {
    if ($('.active').prev('.case').length) {
      $('.active').removeClass('active')
        .prev('.case')
        .addClass('active');
    }
  });
//var location = window.location.href
var location = 'https://example.com/content/#/3'; //for example
 if(location.split("#/")) {
    $('#box' + location.split("#/")[1]).addClass('active');
  }
});

.case {
  display: none
}

.active {
  background: yellow;
  border: 1px solid;
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="next">
  <h1>next</h1>
</div>
<div id="prev">
  <h1>prev</h1>
</div>
<div id="box1" class="case">content 1</div>
<div id="box2" class="case">content 2</div>
<div id="box3" class="case">content 3</div>