How to change bootstrap theme on click of link

Question

I want to switch between the bootstrap theme on click of link of that theme name here is the html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=no">
  <title>Theme Changer</title>
  <meta name="description" content="" />
  <meta name="keywords" content="">
  <link id="theme" rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-light navbar-light">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </nav>
    <div class="row">
        <div class="col-md-6">
            <a id="Cyborg" href="" class="btn btn-block">Cyborg</a>
        </div>
        <div class="col-md-6">
            <a id="Lux" href="" class="btn btn-block">Lux</a>
        </div>
    </div>
         <footer>
            <p>Theme Changer</p>
        </footer>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script>
$(document).ready(function () {
    $('#Cyborg').click(function () {
        $('#theme').attr('href', 'css/bootstrapcyborg.css');
    });
    $('#Lux').click(function () {
        $('#theme').attr('href', 'css/bootstraplux.css');
    });
});
  </script>
</body>
</html>

I have created link for initial page load css and then on click of either of the link i am replacing original href attribute with i have assign in jquery. Can anybody suggest where i am going wrong.

I think the simple way is use variable and load css base to that variable. — Simone Rossaini, May 09 '20 at 07:26

score 0 · Answer 1 · answered May 09 '20 at 07:40

I can think of few solutions for that, but I would recommend first one.

Instead of a tags use button without href attribute.

<div class="col-md-6">
    <button id="Cyborg" class="btn btn-block">Cyborg</button>
</div>
<div class="col-md-6">
    <button id="Lux" class="btn btn-block">Lux</button>
</div>

Add href="javascript:void(0)" or href="#" to your a tags

<div class="col-md-6">
   <a id="Cyborg" href="javascript:void(0)" class="btn btn-block">Cyborg</a>
</div>
<div class="col-md-6">
   <a id="Lux" href="javascript:void(0)" class="btn btn-block">Lux</a>
</div>

OR

<div class="col-md-6">
   <a id="Cyborg" href="#" class="btn btn-block">Cyborg</a>
</div>
<div class="col-md-6">
   <a id="Lux" href="#" class="btn btn-block">Lux</a>
</div>

But keep in mind that having '#' as href will take you back to the top of the page when a clicked.

And also following https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a it's bad practice

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a instead. In general, you should only use a hyperlink for navigation to a real URL.

Prevent firing default browser action on click

$('#Cyborg').click(function (e) {
    e.preventDefault();
    $('#theme').attr('href', 'css/bootstrapcyborg.css');
});
$('#Lux').click(function (e) {
    e.preventDefault();
    $('#theme').attr('href', 'css/bootstraplux.css');
});

Remove href atribute completely - then you might need to style a tags your way, because browser will remove anchor styling

Explanation: Because #Cyborg or #Lux are anchor elements their default browser behaviour when clicked is to initiates navigation to its URL, because you have empty string inside href browser simply reloads the page. Then browser goes back to the state after first load and you see no effect.

Hope I understand you correctly and this will help

How to change bootstrap theme on click of link

1 Answers1