jQuery Get Selected Bootstrap Tab or Active Tab on Click (Change) Example

Category > ASP.NET || Published on : Friday, November 6, 2015 || Views: 4246 || Get Selected Bootstrap Tab or Active Tab on Click (Change) Example using jQuery asp.net and C#


In this example I will explain you with an example with sample source code jQuery Get Selected Bootstrap Tab or Active Tab on Click (Change) Example using C#. The example will work for ASP.Net 3.5, 4.0 and newer version

Step 1: First, We start by creating an Empty asp.net web site in Visual Studio .NET 2013.

Step 2: Add a new web page name default.aspx with the following codes:-

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>www.sourcecodehub.com --> jQuery Bootstrap Tabs Click Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var target = $(e.target).attr("href")
                alert(target);
            });
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <br />
    <ul class="nav nav-tabs" style="width: 30%; margin-left: 30%;">
        <li><a href="#tab1" data-toggle="tab">Tab one</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab two</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab three</a></li>
    </ul>
    <div style="width: 30%; margin-left: 30%">
        <div class="tab-content" id="tabs">
            <div class="tab-pane" id="tab1">
                Tab1 content goes here</div>
            <div class="tab-pane" id="tab2">
                Tab2  content goes here</div>
            <div class="tab-pane" id="tab3">
                Tab3 content goes here</div>
        </div>
    </div>
    </form>
</body>
</html>

Step 3: Run the application by pressing F5

Step 4: Screenshot will be shown below:-

Conclusion,In this tutorial we have learned how to Get Selected Bootstrap Tab or Active Tab on Click (Change) Example using jQuery, asp.net and C#