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

Question

So I've made a function that, when you click on a button, a certain div comes up with its own content. When clicking on the button again, the div will hide and another div will show up. This div will always show up when none of the other three divs aren't selected.

The problem is when I'm adding an href tag with an anchor link which is connected to each div , that I must click twice on the button before the hidden div will show.

Check fiddle here: http://jsfiddle.net/449r8Lwv/

So as you can see, when you click on one of the buttons, nothing happens except that the url changes which is a good thing. But clicking AGAIN on the same button lets you show the hidden div. This is not what I want, I want the div show up the first time you click on the button already.

Also, when going directly to the url with an anchor name in it, It will immediately show the div with it's content that is connected to the anchor, that's a good thing. But then if you click another button again, it will show the div that must normally show when NONE of the divs aren't selected which is not the case.

Example: You go to url website.com/test.html#2. Then when you click on button 3, then content of the connected div must come("3") up but instead the div(named #text) will come up when that one should only come up if none of the divs that are connected to the buttons arent showing up.

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>

Thank you a lot.

ps: in the fiddle I only put the second script part because of some issues when I put the other part aswell. If you test it local you should use the whole JavaScript/jQuery part.

Answer 1

Since the URL is changing, you need to put doToggle(..) in the main section of your code.

Another problem is the data-target. jQuery may evaluate the number as a number. So .1 will become 0.1. We can add the . in 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>

and the 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);

Edited: In you script before, doToggle was working, but after it executed, the url would change, making it look like doToggle wasn't working. The click handler should only perform the toggle if the hash url is the same as the toggled div.

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

Answer 2

I'd suggest to remove dots in your data-target attribute.

So, your HTML will look like this:

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

And you can try it here .

Answer 3

Change

$('#clicks .click')

To

$('#clicks.click')

This should solve your problem.

So remove the space in your selector

example: jsfiddle

Answer 4

There is flaw in your code thats why it requires two click to show the div.
Flaw: when user clicks on a link/button say "1" first time both your click and onhashchange handler is getting fired one after another. ie clickHandler is first display the div 1 which is again gets hidden by your onhashchange handler call.
Next time when you click on same link 'No hashchange will occur' and hence only click handler is getting fired which in turn display the div correctly.
Solution: I suggest you should only use click handler because of the nature of your requirement. Or if it doesn't fit your requirement, you can set global variable to track if one of the event is fired and check its value before calling doToggle in your hashchangehandler.