Question

当使用与隐藏div中的链接标记链接的锚点时，如何显示隐藏的div。如果你知道我的意思..

我的意思是在访问网址http://.com/#1然后我想要显示div，所以就像按下名为1的按钮一样。

HTML

    <a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<br><br><br>
<div id="clicks"> 
 <a class="click" id="showInfo" data-target=".1"><button>1</button></a>
 <a class="click" id="showDataInput" data-target=".2"><button>2</button></a>
 <a class="click" id="showHistory" data-target=".3"><button>3</button></a>
</div>
    <div class="1 target" style="display: none;"><a name="1">1</a></div>
    <div class="2 target" style="display: none;"><a name="1">2</a></div>
    <div class="3 target" style="display: none;"><a name="1">3</a></div>
<div id="text">"I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"</div>

的Javascript

    var $targets = $('.target');
$('#clicks .click').click(function () {
    var $target = $($(this).data('target')).toggle();
    $targets.not($target).hide();
    $('#text').css('display', $('div.target:visible').length ? 'none':'')
});

谢谢

Answer 1

您需要获取初始哈希并通过onhashchange订阅哈希更改，因此您的代码变为（我稍微修改了您的代码，最终版本在Chrome中本地测试）：

  function doToggle(num) {
      var target = $('div.target' + num);
      target.toggle();
      $('.target').not(target).hide();
      $('#text').css('display', $('div.target:visible').length ? 'none' : '')
  }
  $('#clicks .click').click(function () {
      var num = $(this).data('target');
      doToggle(num);
  });
  function handleHash() {
      doToggle("." + location.hash.substring(1));
  }
  window.onhashchange = handleHash;
  $(handleHash);

Answer 2

您可以使用window.location.hash检测哈希值后的值。

EXP：

    var val=window.location.hash.substring(1);//substring to remove the #
    if(val.length!==0){
        $(".target").hide();
        $("."+val).show();
        }

Answer 3

我不太清楚，但我试图在你的.text div中坚持你的指示，所以这段代码应该做到这一点：

function showHideDiv() {
    $('.target').each(function(){
        if($(this).is(':visible')){
            $('#text').hide();
        }
    });
}
$(document).on('load', showHideDiv);
$('.click').on('click', showHideDiv);

$('#clicks .click').click(function () {
    $('div.target' + $(this).data('target')).toggle();
    $('#text').css('display', $('div.target:visible').length ? 'none':'')
});

Working JSFiddle

Answer 4

您可以使用:target伪类和基于散列的链接（browser support）

div {
  display: none;
}
div:target {
  display: block;
}

jsfiddle

如何让带锚标记的url显示隐藏的div

4 个答案: