CODEWITHSUNDEEP
jquery
System-x32z
System-x32z

Reputation: 1971

load content into div

I have this very simple page with menu that contain three <ul>s and the content div: http://jsfiddle.net/vvqPN/

jQuery:

$(document).ready(function () {
    $('.subcontent:gt(0)').hide();
    $('#menu').on('click', 'li:not(.current) a', function () {
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        // fade out all open subcontents
        $('.subcontent:visible').hide(600);
        // fade in new selected subcontent
        $('.subcontent[id=' + $(this).attr('data-id') + ']').show(600);
    });
});

In the page, when you click on the first <ul> the first content loads into the content div, then when you click the second <ul> the second content loads into the content div and the same thing for the third content. The problem that I'm trying to solve is that when you scroll down in the page and try to click on any of the <ul>s the page automatically return to the top of the page.

Upvotes: 0

Views: 83

Answers (2)

Neil S
Neil S

Reputation: 2304

prevent the default click event of the anchor tag. Otherwise, the url is changed, and the page is sent to the top.

$('#menu').on('click', 'li:not(.current) a', function (e) {
    e.preventDefault();

http://jsfiddle.net/HM633/

Upvotes: 1

kunalbhat
kunalbhat

Reputation: 1719

Use preventDefault(); to disable the default behavior of an anchor tag (linking to something). 

$('#menu').on('click', 'li:not(.current) a', function (event) { //Add event
  event.preventDefault();
  ...
});

Upvotes: 6

Related Questions