Unwanted page refresh on jquery ui tab change

Question

1. I have used already Jquery UI Tabs. But in my new project I need simple tabs with detail. I have used this jquery ui demo but when I click on any tab it refreshes all page. (that is what I need to achieve in my work)

2. Now I think the problem is different little. When I use only anchor tag(Please note that I am talking about only anchor tag not about jquery ui tabs in this point), it refreshes page. I know if I use # in href that will not fire click event and page will not refresh but in my case it refreshes page.

I have also used onclick='return false;' still it loads page. I don't know why. I might not getting clue what I am making wrong.

(Point 1 & 2) I have searched on web but still not getting any answer. Screen Shots Thanks in advance.

Answer 1

You need to change your href of your anchor elements with div-tab-id like,

HTML

<div id="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">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.....</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat,....</p>
    </div>
</div>

SCRIPT

$(function() {
   $( "#tabs" ).tabs();
});

Here, tabs-1 and tabs-2 are ids of div elements and given in achor tag href.

Live Demo

Answer 2

I believe you misunderstood the DOM structure click on the view source on the specified URL and check the DOM structure there is no # for href but instead #tabs-1 which opens up div with id tabs-1

Answer 3

The following code will do the trick:

onclick='event.preventDefault();'