Question

所以我做了一个功能，当你点击某个按钮时，某个div会出现自己的内容。再次点击该按钮时，div将隐藏，另一个div将会显示。当没有选择其他三个div时，此div将始终显示。

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

正如你所看到的，当你点击其中一个按钮时，没有任何反应，除了网址改变这是一件好事。但是，在同一按钮上点击重新，可以显示隐藏的div。这不是我想要的，我希望div显示你已经点击按钮的第一次时间。

此外，当直接转到带有锚名称的url时，它会立即显示div与其连接到锚点的内容，这是一件好事。但是如果你再次点击另一个按钮，它将显示当没有选择任何div时通常必须显示的div，而不是这种情况。

示例：您访问url website.com/test.html#2。然后当你点击按钮3时，连接的div的内容必须（“3”）向上，但是当一个div（如果没有连接到的div）只出现时，它会出现按钮没有出现。

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

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

因此，您的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 缺陷：当用户点击链接/按钮时，首次点击点击和 onhashchange 处理程序时，会先说“1”。即clickHandler首先显示div 1，它再次被你的onhashchange处理程序调用隐藏下次当你点击相同的链接时“不会发生散列更改”，因此只有点击处理程序被触发，这反过来正确显示div。
解决方案：我建议您只应使用点击处理程序，因为您的要求属性。或者如果它不符合您的要求，您可以设置全局变量以跟踪其中一个事件是否被触发并在您的hashchangehandler中调用 doToggle 之前检查其值。

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

4 个答案: