When button is clicked then remove active class for list group and disabled it and then move to next list group and goes onltscript type34textjavascript34gt documentreadyfunction 34btnHome34clickfunction 34lilistgroupitemactive34removeClass34active34 34lilistgroupitemactive34addClass34disabled34 34lilistgroupitemdisabled34removeClass34disabled34

Add Active class on Button Click in Bootstrap List Group using jQuery

Ashcool

SOLVED CLOSED ACTIVE ANSWERED
User: Ashcool
Posted: on Feb 17, 2023 03:54 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 1910

When button is clicked then remove active class for list group and disabled it and then move to next list group and goes on.

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnHome").click(function () {
            $("li.list-group-item.active").removeClass("active");
            $("li.list-group-item.active").addClass("disabled");
            $("li.list-group-item.disabled").removeClass("disabled");
            $("li.list-group-item.disabled").addClass("active"); 
        });
    });
</script>

<ul class="list-group nav nav-tabs list-group numbered"> 
    <li class="list-group-item active"><a data-toggle="tab"  href="#home">Candidate's General Information</a></li>
    <li class="list-group-item disabled"><a href="#menu1" data-toggle="tab" >Category Details/श्रेणी विवरण</a></li>
    <li class="list-group-item disabled"><a data-toggle="tab" href="#menu2">PH/FF Details/दिव्यांग/स्वतंत्रता सेनानी के नाती/नतिनी/पोता/पोती से सम्बंधित विवरण </a></li>
    <li class="list-group-item disabled"><a data-toggle="tab" href="#menu3">Essential Qualification/अनिवार्य योग्यता </a></li>
    <li class="list-group-item disabled"><a data-toggle="tab" href="#menu4">Higher Qualification/उच्चतर योग्यता </a></li>
    <li class="list-group-item disabled"><a data-toggle="tab" href="#menu5">Other Qualification/अन्य योग्यता </a></li>
    <li class="list-group-item disabled"><a data-toggle="tab" href="#menu6">Experience Details/अनुभव विवरण</a></li>
    <li class="list-group-item disabled"><a data-toggle="tab" href="#menu7">Capture Image/Biometric</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
    <asp:Button ID="btnHome" runat="server" Text="Save Next" class="btn btn-primary"/>
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

AjayV

0 3

Reply
ANSWER
User: AjayV
Replied: on Feb 17, 2023 07:16 AM
Modified: on Feb 17, 2023 07:17 AM
Report

Hi Ashcool,

Refer below code.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <style type="text/css">
        .list-group-item.active > a { color: white !important; }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var activeIndex = 0;
            $("#btnHome").click(function () {
                $("li.list-group-item").eq(activeIndex).removeClass("active");
                $("li.list-group-item").eq(activeIndex + 1).addClass("active");
                $("li.list-group-item").eq(activeIndex + 1).removeClass("disabled");
                $("li.list-group-item").eq(activeIndex).addClass("disabled");
                if (activeIndex + 1 == $("li.list-group-item").length) {
                    $("li.list-group-item").eq(activeIndex).removeClass("active");
                    $("li.list-group-item").eq(0).addClass("active");
                    $("li.list-group-item").eq(0).removeClass("disabled");
                    $("li.list-group-item").eq(activeIndex).addClass("disabled");
                    activeIndex = 0;
                } else {
                    activeIndex++;
                }
                ActiveDiv($("li.list-group-item").eq(activeIndex).find('a').attr('href'));
                window.location.href = $("li.list-group-item").eq(activeIndex).find('a')[0].href;

                return false;
            });

            $("li.list-group-item a").click(function () {
                var current = $(this);
                ActiveDiv($(this).attr('href'));
                $.each($(".list-group-item a"), function (index, item) {
                    if ($(current).html() == $(item).html()) {
                        activeIndex = index;
                        $("li.list-group-item").eq(index).removeClass("active");
                        $("li.list-group-item").eq(index).removeClass("disabled");
                        $("li.list-group-item").eq(index).addClass("active");
                    } else {
                        $("li.list-group-item").eq(index).removeClass("active");
                        $("li.list-group-item").eq(index).removeClass("disabled");
                        $("li.list-group-item").eq(index).addClass("disabled");
                    }
                });
                window.location.href = $("li.list-group-item").eq(activeIndex).find('a')[0].href;
            });
        });

        function ActiveDiv(id) {
            $('.content.tab-pane.fade').removeClass("in active");
            $(id).addClass("in active");
        }
    </script>
</head>
<body class="container">
    <div class="navigation">
        <ul class="Class1">
            <li class="list-group-item active"><a data-toggle="tab" href="#home">Candidate's General Information</a></li>
            <li class="list-group-item disabled"><a data-toggle="tab" href="#menu1">Category Details/श्रेणी विवरण</a></li>
            <li class="list-group-item disabled"><a data-toggle="tab" href="#menu2">PH/FF Details/दिव्यांग/स्वतंत्रता सेनानी के नाती/नतिनी/पोता/पोती से सम्बंधित विवरण </a></li>
            <li class="list-group-item disabled"><a data-toggle="tab" href="#menu3">Essential Qualification/अनिवार्य योग्यता </a></li>
            <li class="list-group-item disabled"><a data-toggle="tab" href="#menu4">Higher Qualification/उच्चतर योग्यता </a></li>
            <li class="list-group-item disabled"><a data-toggle="tab" href="#menu5">Other Qualification/अन्य योग्यता </a></li>
            <li class="list-group-item disabled"><a data-toggle="tab" href="#menu6">Experience Details/अनुभव विवरण</a></li>
            <li class="list-group-item disabled"><a data-toggle="tab" href="#menu7">Capture Image/Biometric</a></li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="tab-pane fade in active">
            <input id="btnHome" type="submit" value="Save Next" class="btn btn-primary" />
        </div>
    </div>
    <div id="home" class="content tab-pane fade">
        Home
    </div>
    <div id="menu1" class="content tab-pane fade">
        1
    </div>
    <div id="menu2" class="content tab-pane fade">
        2
    </div>
    <div id="menu3" class="content tab-pane fade">
        3
    </div>
    <div id="menu4" class="content tab-pane fade">
        4
    </div>
    <div id="menu5" class="content tab-pane fade">
        5
    </div>
    <div id="menu6" class="content tab-pane fade">
        6
    </div>
    <div id="menu7" class="content tab-pane fade">
        7
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Add Active class on Button Click in Bootstrap List Group using jQuery

Company

Explore

Follow us

Contact Us