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

Question

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

问题是当我添加带有连接到每个div的锚链接的href标签时，必须在按钮上单击两次，然后隐藏的div才会显示。

在此处检查小提琴： http : //jsfiddle.net/449r8Lwv/

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

另外，当直接转到其中带有锚点名称的url时，它将立即显示具有与锚点连接的内容的div，这是一件好事。 但是，如果再次单击另一个按钮，它将显示通常在未选择任何一个div时通常必须显示的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在工作。 仅当哈希网址与切换后的div相同时，点击处理程序才应执行切换。

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

Answer 2

我建议您删除数据目标属性中的点。

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

您可以在这里尝试。

Answer 3

更改

$('#clicks .click')

至

$('#clicks.click')

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

因此，请删除选择器中的空格

示例： jsfiddle

Answer 4

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