javascript and link cant change page

user_15399881 0
Viewed 32

In my code a have a simple menu with bootstarp,
as you can see clicking on the menu it does not change page, i tries with link and a javascript, Chrome does not give me any error about JavaScript, is there any other way to change page? Even using a link seems not working, as you can see I tried on the last button using a link.
Even with a javascript on the click event as: alert('fired') is not firing

 .lblBiancoMenu {
              color: white !important;
            }
          .subCat .li{ color: white;} 



          
            .redBack {
                background-color:firebrick;
                /*text-shadow: 1px 1px 1px #ccc;*/
                font-size: 1.0em;
                 color: white !important;
                /*width:25%;*/
            }

            .flex-contianer {
              display: flex;
              justify-content: space-between;
              background-color:firebrick;
             /* border: 1px solid red;*/
            }

          
            .btn {width:25%;}
        
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


        
         <!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    
  
  
  
              <div  id="header-content" style="width:100%"  class="btn-group  btn-group-toggle " data-toggle="buttons">

                  <label class="btn btn-secondary redBack"><i class="fas fa-home"></i><br />
                    <input type="radio" name="options1" id="option1" checked onclick="window.location.href='Index.aspx';">Home
                  </label>
                  <label class="btn btn-secondary  redBack"><i class="fa fa-book-open"></i><br />
                    <input type="radio" name="options2" id="option2" >Menù
                  </label>
   <a  href="registrazione.aspx"  class="btn btn-default redBack">
                  <i class="far fa-address-card"></i><br />
                Account
              </a>

                  <label class="btn btn-secondary redBack"><i class="far fa-address-card"></i><br />
                    <a href="registrazione.aspx"><input type="radio" name="options4" id="option4"  onclick="window.location.href='Registrazione.aspx'">Account</a>
                  </label>
                </div>

bootstrap-4 html
1 Answers

The bootstrap.js appears to be stopping the click event, as you see below If I simply remove data-toggle="buttons" from your div#header-content then the links work but, then the input[type='radio'] shows. I would suggest using a navbar instead.

.lblBiancoMenu {
              color: white !important;
            }
          .subCat .li{ color: white;} 



          
            .redBack {
                background-color:firebrick;
                /*text-shadow: 1px 1px 1px #ccc;*/
                font-size: 1.0em;
                 color: white !important;
                /*width:25%;*/
            }

            .flex-contianer {
              display: flex;
              justify-content: space-between;
              background-color:firebrick;
             /* border: 1px solid red;*/
            }

          
            .btn {width:25%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


        
         <!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    
  
  
  
              <div  id="header-content" style="width:100%"  class="btn-group  btn-group-toggle " >

                  <label class="btn btn-secondary redBack"><i class="fas fa-home"></i><br />
                    <input type="radio" name="options1" id="option1" checked onclick="window.location.href='Index.aspx';">Home
                  </label>
                  <label class="btn btn-secondary  redBack"><i class="fa fa-book-open"></i><br />
                    <input type="radio" name="options2" id="option2" >Menù
                  </label>
   <a  href="registrazione.aspx"  class="btn btn-default redBack">
                  <i class="far fa-address-card"></i><br />
                Account
              </a>

                  <label class="btn btn-secondary redBack"><i class="far fa-address-card"></i><br />
                    <a href="registrazione.aspx"><input type="radio" name="options4" id="option4"  onclick="window.location.href='Registrazione.aspx'">Account</a>
                  </label>
                </div>

user_61273930
Related