CODEWITHSUNDEEP
javascriptasp.net
user2511999
user2511999

Reputation: 41

Remove focus from tab control

I have a tab control on my page with two tabs. When I click on the second tab, the page scrolls down to the tab control. I don't want to have any focus on the tab control and maintain the page where it was. I know it happens due to the href on the <li> but if I remove the href I don't see any data.

My html code is as below:

<div id="tabContainer" class="Container">
  <ul class="maintabs">
    <li><a href="#tabDescription" class="active">Description</a></li>
    <li><a href="#tabTerms">Terms</a></li>
  </ul>
  <div class="tabDetails">
    <div id="tabDescription" class="tabContents">
      <div id="divDescription" runat="server"></div>               
    </div>
    <div id="tabTerms" class="tabContents">
      <div id="divterms" runat="server"></div>
    </div>                            
  </div>
</div>

Javascript:

<script type="text/javascript">
        $(document).ready(function () {
            $(".tabContents").hide(); 
            $(".tabContents:first").show(); 

            $("#tabContainer ul li a").click(function () { 

                var activeTab = $(this).attr("href"); 
                $("#tabContainer ul li a").removeClass("active"); 
                $(this).addClass("active"); 
                $(".tabContents").hide(); 
                $(activeTab).show(); 
            });
        });
 </script>

Upvotes: 0

Views: 462

Answers (1)

pickypg
pickypg

Reputation: 22332

You need to disable the default behavior of the link from occurring.

For your click action, accept the first argument, e (for event) and call JQuery's preventDefault function on it. This will stop the browser from following the link.

$("#tabContainer ul li a").click(function (e) {
    // hey browser, don't handle this link--we'll take it from here
    e.preventDefault();

    // ...
});

You can call that anywhere in the function (e.g., at the end).

Upvotes: 1

Related Questions