堆栈内存溢出
  繁体   English   中英

我创建了 css 导航栏，我选择的导航按钮没有改变它的颜色，而是另一个按钮正在改变它的颜色

[英]I have created css navbar, my selected nav button is not changing its colour,instead another button is changing its colour

 原文  2022-01-05 09:29:30  3   1    javascript/ html/ css/ navbar

问题描述

1）在这里我选择了“出口商品”按钮，但“CPI”按钮处于活动状态。 2）即使我 select“汇率”按钮，“CPI”按钮颜色保持不变 3）“主页”和“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" />


<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 个解决方案

解决方案1
 0  2022-01-05 09:41:45

您更改了 class 的名称：“pill-nav”与“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>

JavaScript 用于更换<div>按下按钮的颜色</div><div id="text_translate"><p>当我的 html 和 JS 代码在同一个文件中时，我有点不确定为什么我的代码似乎不起作用。 当 html 和 JS 分开时，似乎工作正常。 有人可以指出我的错误....我是新手！</p><p> <strong>HTML：</strong></p><pre> &lt;div class="main"&gt; &lt;div class="light"&gt;&lt;/div&gt; &lt;button onclick="chngCol()" id="burn"&gt;Burn!&lt;/button&gt; &lt;/div&gt;</pre><p> <strong>JavaScript：</strong></p><pre> chngCol() { if(document.getElementByClass('light').style.background == "#00ffff") { document.getElementByClass('light').style.background = "#ffff00"; } else if(document.getElementByClass('light').style.background == "ffff00") { document.getElementByClass('light').style.background = "#ff00ff"; } else if(document.getElementByClass('light').style.background == "#ff00ff") { document.getElementByClass('light').style.background = "#00ffff"; } }</pre><p> <strong>CSS：</strong></p><pre> .light{ width: 50px; height: 50px; background-color:#00ffff; }</pre><p> 所有代码都在同一个文档中，带有适当的标签，但是我在第一个 { 调用 chngCol.</p></div>

[英]JavaScript for changing a <div> colour from a button press

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用 CSS 更改按钮颜色 按钮颜色不变 重新加载时按钮颜色不会改变 更改按钮的背景颜色（开/关） 如果依赖于表格单元格，则更改表格单元格的颜色 激活按钮时更改其CSS 使用按钮java脚本更改某些内容的颜色 Java语言边框颜色在单选按钮单击时未更改 使用 React 中的按钮单击更改 div 颜色样式 JavaScript 用于更换<div>按下按钮的颜色</div><div id="text_translate"><p>当我的 html 和 JS 代码在同一个文件中时，我有点不确定为什么我的代码似乎不起作用。 当 html 和 JS 分开时，似乎工作正常。 有人可以指出我的错误....我是新手！</p><p> <strong>HTML：</strong></p><pre> &lt;div class="main"&gt; &lt;div class="light"&gt;&lt;/div&gt; &lt;button onclick="chngCol()" id="burn"&gt;Burn!&lt;/button&gt; &lt;/div&gt;</pre><p> <strong>JavaScript：</strong></p><pre> chngCol() { if(document.getElementByClass('light').style.background == "#00ffff") { document.getElementByClass('light').style.background = "#ffff00"; } else if(document.getElementByClass('light').style.background == "ffff00") { document.getElementByClass('light').style.background = "#ff00ff"; } else if(document.getElementByClass('light').style.background == "#ff00ff") { document.getElementByClass('light').style.background = "#00ffff"; } }</pre><p> <strong>CSS：</strong></p><pre> .light{ width: 50px; height: 50px; background-color:#00ffff; }</pre><p> 所有代码都在同一个文档中，带有适当的标签，但是我在第一个 { 调用 chngCol.</p></div>
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM