I have created css navbar, my selected nav button is not changing its colour,instead another button is changing its colour
Question
1)here i have selected "Exports merchandise" button but "CPI" button is active. 2)Even if i select "exchange rate" button, "CPI" button colour remains unchanged 3)"Home" and "CPI" buttons are changing its colour but "Exchange rate" and "Ëxports merchandise not"
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet" />
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.pill-nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
.pill-nav a:hover {
background-color: #ddd;
color: black;
}
.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
</style>
</head>
<body>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/exg_rate">Exchange rate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/CPI">CPI</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Exp_mrch">Exports Merchandise</a>
</li>
</ul>
</body>
</html>
exg_rate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.pill-nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
.pill-nav a:hover {
background-color: #ddd;
color: black;
}
.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
</style>
</head>
<body>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/exg_rate">Exchange rate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/CPI">CPI</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Exp_mrch">Exports Merchandise</a>
</li>
</ul>
<!--</html>-->
<div class="container-fluid px-4">
<div class="row">
<div class="col-md-12">
<div>
<div id="menu">
<br>
<label id="multiselect1"><b>Select Year</b></label>
<br />
<select id="multiple">
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
</select>
</div>
<h2>{{header}}</h2>
<div>{{description}}</div>
<div id="chart5"
class="chart"
style="width:60%;max-width:500px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON5 | safe}};
Plotly.plot('chart5', graphs, {});
</script>
</div>
</div>
<h1 id="heading">CAGR plots</h1>
<div>
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart4"
class="chart"
style="width:60%;max-width:500px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON4 | safe}};
Plotly.plot('chart4', graphs, {});
</script>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart2"
class="chart"
style="width:60%;max-width:900px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON2 | safe}};
Plotly.plot('chart2', graphs, {});
</script>
</div>
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart3"
class="chart"
style="width:60%;max-width:900px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON3 | safe}};
Plotly.plot('chart3', graphs, {});
</script>
</div>
</div>
<div>
<h1 id="header">Year on Year Analysis</h1>
</div>
<div class="row">
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart"
class="chart"
style="width:60%;max-width:900px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON | safe}};
Plotly.plot('chart', graphs, {});
</script>
</div>
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart1"
class="chart"
style="width:60%;max-width:900px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON1 | safe}};
Plotly.plot('chart1', graphs, {});
</script>
</div>
</div>
</div>
</div>
</body>
</html>
CPI.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.pill-nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
.pill-nav a:hover {
background-color: #ddd;
color: black;
}
.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
</style>
</head>
<body>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/exg_rate">Exchange rate</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/CPI">CPI</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Exp_mrch">Exports Merchandise</a>
</li>
</ul>
<div class="container-fluid px-4">
<div class="row">
<div class="col-md-12">
<div>
<div id="menu">
<br>
<label id="multiselect1"><b>Select Year</b></label>
<br />
<select id="multiple">
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
</select>
</div>
<h2>{{header}}</h2>
<div>{{description}}</div>
<div id="chart5"
class="chart"
style="width:60%;max-width:500px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON5 | safe}};
Plotly.plot('chart5', graphs, {});
</script>
</div>
</div>
<h1 id="heading">CAGR plots</h1>
<div>
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart4"
class="chart"
style="width:60%;max-width:500px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON4 | safe}};
Plotly.plot('chart4', graphs, {});
</script>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart2"
class="chart"
style="width:60%;max-width:900px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON2 | safe}};
Plotly.plot('chart2', graphs, {});
</script>
</div>
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart3"
class="chart"
style="width:60%;max-width:900px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON3 | safe}};
Plotly.plot('chart3', graphs, {});
</script>
</div>
</div>
<div>
<h1 id="header">Year on Year Analysis</h1>
</div>
<div class="row">
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart"
class="chart"
style="width:60%;max-width:900px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON | safe}};
Plotly.plot('chart', graphs, {});
</script>
</div>
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart1"
class="chart"
style="width:60%;max-width:900px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON1 | safe}};
Plotly.plot('chart1', graphs, {});
</script>
</div>
</div>
</div>
</div>
</body>
</html>
Exp_mrch.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.pill-nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
.pill-nav a:hover {
background-color: #ddd;
color: black;
}
.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
</style>
</head>
<body>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/exg_rate">Exchange rate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/CPI">CPI</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/Exp_mrch">Exports Merchandise</a>
</li>
</ul>
<div class="container-fluid px-4">
<div class="row">
<div class="col-md-12">
<div>
<div id="menu">
<br>
<label id="multiselect1"><b>Select Year</b></label>
<br />
<select id="multiple">
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
</select>
</div>
<h2>{{header}}</h2>
<div>{{description}}</div>
<div id="chart5"
class="chart"
style="width:60%;max-width:500px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON5 | safe}};
Plotly.plot('chart5', graphs, {});
</script>
</div>
</div>
<h1 id="heading">CAGR plots</h1>
<div>
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart4"
class="chart"
style="width:60%;max-width:500px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON4 | safe}};
Plotly.plot('chart4', graphs, {});
</script>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart2"
class="chart"
style="width:60%;max-width:900px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON2 | safe}};
Plotly.plot('chart2', graphs, {});
</script>
</div>
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart3"
class="chart"
style="width:60%;max-width:900px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON3 | safe}};
Plotly.plot('chart3', graphs, {});
</script>
</div>
</div>
<div>
<h1 id="header">Year on Year Analysis</h1>
</div>
<div class="row">
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart"
class="chart"
style="width:60%;max-width:900px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON | safe}};
Plotly.plot('chart', graphs, {});
</script>
</div>
<div class="col-md-6">
<h2> {{header1}} </h2>
<div> {{description1}} </div>
<div id="chart1"
class="chart"
style="width:60%;max-width:900px"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON1 | safe}};
Plotly.plot('chart1', graphs, {});
</script>
</div>
</div>
</div>
</div>
</body>
</html>
1 answers
solution1
0 2022-01-05 09:41:45
You changed the name of class: "pill-nav" is not the same as "nav-pills".
body { font-family: Arial, Helvetica, sans-serif; }.nav-pills a { display: inline-block; color: black; text-align: center; padding: 14px; text-decoration: none; font-size: 17px; border-radius: 5px; }.nav-pills a:hover { background-color: #ddd; color: black; }.nav-pills a.active { background-color: dodgerblue; color: white; } <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="/">HOME</a> </li> <li class="nav-item"> <a class="nav-link" href="/exg_rate">Exchange rate</a> </li> <li class="nav-item"> <a class="nav-link" href="/CPI">CPI</a> </li> <li class="nav-item"> <a class="nav-link" href="/Exp_mrch">Exports Merchandise</a> </li> </ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Changing button colour using CSS
Button colour not changing
Button colour is not changing on reload
Changing the background colour of a button (On/Off)
Changing a table cell colour ifdepending on its neighbours
Changing the css of button when its active
Changing the colour of something using button java script
Javascript border colour not changing on radio button click
Changing div colour styling with button click in React
JavaScript for changing a <div> colour from a button press
Related Tags