單擊鏈接后如何立即顯示隱藏的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之前檢查其值。