1

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"

Dashboard image

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>
Gyro Gearless
  • 5,131
  • 3
  • 18
  • 14
Abhishek_Mestry
  • 21
  • 2

1 Answers1

0

You changed the name of class: "pill-nav" is not the same as "nav-pills".

EDIT:

...and added a little block of js. Credit goes to Chris & Palaven:

Vanilla Javascript: toggling a class name on each element of a list one so that only item at time has the desired class

  const links = document.querySelectorAll('.nav-link');

links.forEach((link) => {
  link.addEventListener('click', () => {
    const notClickedLinks = Array.from(links).filter((notClickedLink) => {
      return notClickedLink !== link;
    });

    notClickedLinks.forEach((notClickedLink) => {
      notClickedLink.classList.remove('active');
    });

    link.classList.add('active');
  });
});
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="#">Exchange rate</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CPI</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Exports Merchandise</a>
      </li>
    </ul>
Lucie
  • 185
  • 10