单击链接后如何立即显示隐藏的div

Question

所以我做了一个功能，当你点击一个按钮时，某个div 会出现它自己的内容。再次单击该按钮时，div 将隐藏，而另一个 div 将出现。这个div 将始终在其他三个 div 都没有被选中时出现。

问题是当我添加一个带有锚链接的href 标签时，我必须在隐藏的 div 显示之前单击两次按钮。

在这里检查小提琴：http://jsfiddle.net/449r8Lwv/

如您所见，当您单击其中一个按钮时，除了 url 发生变化之外什么都没有发生，这是一件好事。但是在同一个按钮上单击 AGAIN 可以显示隐藏的 div。这不是我想要的，我希望 div 在您点击按钮时第一次显示出来。

另外，当直接访问带有锚点名称的 url 时，它会立即显示与锚点相关联的 div，这是一件好事。但是，如果您再次单击另一个按钮，它将显示在未选择 NONE 时通常必须显示的 div，但事实并非如此。

示例：您访问网址 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：在小提琴中，我只放了第二个脚本部分，因为在我放其他部分时也出现了一些问题。如果你在本地测试它，你应该使用整个 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/

Answer 2

我建议删除 data-target 属性中的点。

因此，您的 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>

你可以试试here。

Answer 3

改变

$('#clicks .click')

到

$('#clicks.click')

这应该可以解决您的问题。

所以删除选择器中的空格

示例：jsfiddle

Answer 4

您的代码存在缺陷，这就是为什么它需要两次单击才能显示 div。
缺陷：当用户单击链接/按钮时，您的 click 和 onhashchange 处理程序被一个接一个地触发。即 clickHandler 首先显示 div 1 再次被您的 onhashchange 处理程序调用隐藏。
下次当您单击同一链接时，“不会发生 hashchange”，因此只会触发单击处理程序，从而正确显示 div。
解决方案：我建议您只应使用单击处理程序由于您的要求的性质。或者，如果它不符合您的要求，您可以设置全局变量来跟踪是否触发了某个事件，并在您的 hashchangehandler 中调用 doToggle 之前检查其值。