javascript - 如何在点击链接后立即显示隐藏的div

Question

所以我创建了一个函数，当您单击按钮时，某个 div 会显示自己的内容。再次单击该按钮时，div 将隐藏，另一个 div 将显示。当未选择其他三个 div 时，此 div 将始终显示。

问题是，当我添加带有连接到每个 div 的 anchor 链接的 href 标记时，我必须在隐藏按钮之前单击按钮两次div 将显示。

在这里检查 fiddle :http://jsfiddle.net/449r8Lwv/

正如您所看到的，当您单击其中一个按钮时，除了 url 发生变化之外没有任何反应，这是一件好事。但是，单击同一按钮上的再次可以显示隐藏的 div。这不是我想要的，我希望 div 在您点击按钮时第一次显示。

此外，当直接访问包含 anchor 名称的 url 时，它会立即显示 div 及其连接到 anchor 的内容，这是一件好事。但是，如果您再次单击另一个按钮，它将显示在未选择任何 div 时通常必须显示的 div，但情况并非如此。

示例:您访问 url website.com/test.html#2。然后，当您单击按钮 3 时，连接的 div 的内容必须出现(“3”)，但只有当没有连接到的 div 时，该 div(名为 #text)才会出现。按钮没有显示。

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/jQuery

<script>
$(document).ready(function () {
    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':'')
        /*$('#contact_info').toggle(!$targets.is(':visible'));*/
    });
});  
</script>

<script>
  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);
</script>

非常感谢。

ps:在 fiddle 中，我只放置了第二个脚本部分，因为当我放置其他部分时出现了一些问题。如果您在本地测试它，您应该使用整个 JavaScript/jQuery 部分。

Answer 1

由于 URL 正在更改，因此您需要将 doToggle(..) 放在代码的主要部分中。

另一个问题是数据目标。 jQuery 可以将数字评估为数字。所以 .1 将变成 0.1。我们可以添加 .在 JS 中。

<div id="clicks">
 <a href="#1" class="click" id="showInfo" data-target="1"><button>1</button></a>
 <a href="#2" class="click" id="showDataInput" data-target="2"><button>2</button></a>
 <a href="#3" 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:

  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');
      if (num === '.' + location.hash.substring(1)) {
          doToggle(num);
      }
  });

  function handleHash() {
      doToggle("." + location.hash.substring(1));
  }

  if (location.hash.substring(1).length > 0) {
      doToggle('.' + location.hash.substring(1));
  }

  window.onhashchange = handleHash;
  $(handleHash);

编辑:在之前的脚本中，doToggle 正在工作，但是执行后，url 会发生变化，使得 doToggle 看起来不起作用。仅当哈希 url 与切换的 div 相同时，点击处理程序才应执行切换。

http://jsfiddle.net/449r8Lwv/12/