Bootstrap JQuery Tab in ASP.NET


Bootstrap JQuery Tab in ASP.NET

Bootstrap Tab

Tabs are used to separate content into different panes where each pane is viewable one at a time.

Class Description
.nav nav-tabs Creates navigation tabs
.nav-justified Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs are stacked
.tab-content Together with .tab-pane and data-toggle="tab", it makes the tab toggable
.tab-pane Together with .tab-content and data-toggle="tab", it makes the tab toggable

Create HTML Page


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="JS/bootstrap.min.js" type="text/javascript"></script>
    <script src="JS/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    
     Copy and Paste JQuery Code Here
     
    </script>

</head>
<body>
 <form id="form1" runat="server">
  <div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li id="l1"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li id="l2"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li id="l3"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active">
    Home Tab
    </div>
    <div role="tabpanel" class="tab-pane fade" id="profile">
     Profile Tab
    </div>
    <div role="tabpanel" class="tab-pane fade" id="messages">
     Message Tab
    </div>
  </div>

</div>

</div>
 </form>
</body>
</html>

JQuery Code for Bootstrap Tab

This DisableTabs() function is used to Disable all tabs content because when we click on Tabs Button relevant Tab Content should be open and rest will be disable mode

<script type="text/javascript">
    
 $(document).ready(function () {

           DisableTabs();

           function DisableTabs() {
               $('#home').hide();
               $('#profile').hide();
               $('#messages').hide();
               $('#home').addClass('active');
           }

Whenever click on Home Tab below JQuery code will execute step by step
Step - 1 : DisableTabs() :this function is used to Disable all Tab Content.
Step - 2 : var tabid = $(this).attr('href'); : this line is used to get href value (i.e #home).
Step - 3 : $('#l1').addClass('active'); this line is used to apply CSS Code (i.e

  • )
    Step - 4 : $('#l1').siblings().removeClass('active'); removing the CSS Code which was applied (i.e
  • )
    Step - 5 : var tabpanel = $('' + tabid).show(); this line is used to show Tab Content which was relevant to Tab Menu (i.e tabid is nothing but a #home) check tabid in step 2
    Step - 6 : $(tabpanel).addClass('tab-pane fade in active'); add CSS Code to Tab Content

               $('.nav-tabs li a[href="#home"]').on('click', function (event) {
                   DisableTabs();
                   var tabid = $(this).attr('href');
                   $('#l1').addClass('active');
                   $('#l1').siblings().removeClass('active');
                   var tabpanel = $('' + tabid).show();
                   $(tabpanel).addClass('tab-pane fade in active');
               });
    

    Simillary Step 1 - Step 6

    <script type="text/javascript">
    
               $('.nav-tabs li a[href="#profile"]').on('click', function (event) {
                   DisableTabs();
                   var tabid = $(this).attr('href');
                   $('#l2').addClass('active');
                   $('#l2').siblings().removeClass('active');
                   var tabpanel = $('' + tabid).show();
                   $(tabpanel).addClass('tab-pane fade in active');
               });
    
               $('.nav-tabs li a[href="#messages"]').on('click', function (event) {
                   DisableTabs();
                   var tabid = $(this).attr('href');
                   $('#l3').addClass('active');
                   $('#l3').siblings().removeClass('active');
                   var tabpanel = $('' + tabid).show();
                   $(tabpanel).addClass('tab-pane fade in active');
               });
    
           });
         
    </script>
    
  • Tag : bootstrap
    0 Komentar untuk "Bootstrap JQuery Tab in ASP.NET"

    Back To Top