link with href # anchor 打不开#div

Question

我根据选项值在打开div的站点中放了一个select选项列表。当您在站点中时，这工作正常。但是，如果我直接在地址栏中调用 link，如 x.ro/y.html#3，它会显示 div #1 而不是 div #3.

这里是代码（div id 1是display: none，div id 2是display: block）：

$(function() {
  $('#articole').change(function(){
    $('.tiparticol').hide();
    $($(this).val()).show();
  });
});

<select id="articole"  onChange="window.location.href=this.value">
  <option value="#1">1</option>
  <option value="#2" select="selected">2</option>
</select>

谢谢！

Answer 1

默认情况下您不会获得此行为。您需要在加载时检查 window.location.hash 并设置适当的值。

另请注意，您应该从 HTML 中删除 onChange="window.location.href=this.value" 属性。您可以在不显眼的 jQuery change 处理程序中进行设置。试试这个：

$(function() {
  // on change
  $('#articole').change(function() {
    window.location.hash = this.value;
    setOption(this.value);
  });

  // on load
  var hash = window.location.hash.substr(1);
  if (hash)
    setOption(hash);
});

function setOption(value) {
  $('.tiparticol').hide();
  $(value).show();
}

Answer 2

选项属性应该是selected，而不是select。

查看 this working jsfiddle