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

3 Comments | 1476 Views | Post by: Admin | Tags: Get Selected Bootstrap Tab or Active Tab on Click (Change) Example using jQuery, asp.net and C#


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


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#


Post Comments

if you have some suggestion, question, request on jQuery Get Selected Bootstrap Tab or Active Tab on Click (Change) Example.

Please use the comment box to express your views.

 

Comments:

loading...