CODEWITHSUNDEEP
jquery
Chris Stewart
Chris Stewart

Reputation: 1689

jquery make div appear when clicked href clicked on

#tabs-1 {
    display: none;
}    

#tabs-2 {
    display: none;
}

#tabs-3 {
    display: none;
}

<script type="text/javascript">    
      $(document).ready(function () {
          $(this).click(function () {    
              var a = $(this).find("a").attr("href"); 
              $(a).show();
          });
      }); 
</script>

<body>
<form id="form1" runat="server">
  <div class="tabs">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>            
    </ul>
    <div id="tabs-1">
        <h2>Content heading 1</h2>
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Doin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
      <h2>Content heading 2</h2>
      <p>Morbi tfhgdfahsdh</p>
    </div>
  </div>    
</form>
</body>

I'm trying to make a simple jquery script that makes these divs appear when i click on the ahref in the ordered list. When i run this code it always displays the first element in the ordered list. I want to display the element that is linked in the hyperlink.

Upvotes: 2

Views: 1388

Answers (4)

JaredPar
JaredPar

Reputation: 754763

Try the following

$('div.tabs > ul > li > a').click(function(e) {
  var id = this.getAttribute('href');
  $(id).toggle();
  e.preventDefault();
});

This uses the selector divs.tabs ul li a to select the anchor tags in question and adds a click handler to them. On click it will use the href attribute as the id of the DOM element which needs to be hidden. The e.preventDefault() line prevents the anchor from it's default action which would be attempting to navigate to itshref`

Fiddle: http://jsfiddle.net/AWPFJ/3/

Upvotes: 1

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

I use a selector to get all anchor-tags that are children of the .tabs class. Within the click-function I use this to refer to the clicked element, and get the value of the href-attribute. That value is then used as the selector to get the right div to show. The click function receive the event as a parameter, which can be used with .preventDefault() to make sure that the browser does not follow the link.

$(document).ready(function () {
    $("div.tabs ul li a").click(function (event) {
        var id = $(this).attr("href");
        $(id).show();
        event.preventDefault();
    });
});

Upvotes: 1

Web User
Web User

Reputation: 7736

That's because your script is setting the click handler on the entire document, and the first is always getting selected as a result of that. Modify your script to set a click handler on the <a> element or the parent <li> itself, retrieve the DIV corresponding to the href attribute value and invoke the show() method on that DIV. I don't have a chance to test, but it would be something like this:

$(document).ready(function () {
    $('a').click(function () {
        var a = $(this).attr("href");
        $(a).show();
    });
});

HTH, Ashwin

Upvotes: 0

Luc Laverdure
Luc Laverdure

Reputation: 1480

In short, this should do:

$(".tabs").find("a").click(function() {
    $($(this).attr("href")).show();
    return false;
})

You should add a "tab" class to all tabs and add the following as well:

$(".tabs").find("a").click(function() {
    $(".tab").hide();
    $($(this).attr("href")).show();
    return false;
})

Upvotes: 0

Related Questions