我希望在topnav类中获取元素，以便在选择它们时更改颜色。我已经尝试过模仿使手风琴类按钮变暗的代码而没有运气（这就是我需要topnav才能工作，只有文字改变颜色而不是背景）
还需要在移动视图中选择有效标签，并将该标题置于顶部，因为即使我在另一个标签页中，它也会不断显示在线购买。
提前致谢！
<style>
body {margin:0;}
.topnav {
overflow: hidden;
max-width: 600px;
margin: auto;
}
.topnav a {
float: none;
display:inline-flex;
text-align:center;
color: #4ca0d5; /* THIS WONT CHANGE */
padding: 14px 16px;
text-decoration: none;
font-family: big caslon;
font-variant: small-caps;
font-size: 20px;
border: none;
}
.topnav a:hover {
color: #24526f;
}
.topnav .icon {
display: none;
}
/* for screens over 600px wide */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* for screens under 600px wide */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position:absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: inherit;
display:block;
text-align: center;
font-size: 15px;
}
}
/* deals with each tab that pops up when clicking header buttons */
.tabcontent {
color: black;
display: none;
padding: 20px;
padding-top: 50px;
padding-bottom: 50px;
text-align: left;
max-width: 1000px;
margin: auto;
text
}
/* deals with internal accordion buttons in the body */
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 15px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
border-radius: 15px;
margin: 0px 15px 0px 0px
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 15px;
margin-right: 15px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 25px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style><body>
<div class="topnav" id="myTopnav" align="center" >
<a href="#purchasingonline" onclick="openFAQ('Purchasing-Online', this, 'white')" id="defaultOpen">Purchasing Online</a>
<a href="#productinformation" onclick="openFAQ('productinformation', this, '#white')">Product Information</a>
<a href="#payment" onclick="openFAQ('payment', this, '#white')">Payment</a>
<a href="#shipping" onclick="openFAQ('shipping', this, 'white')">Shipping & Delivery</a>
<a href="#returns" onclick="openFAQ('returns', this, 'white')">Returns</a>
<a href="#contactus" onclick="openFAQ('contactus', this, 'white')">Contact us</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<!--BODY START-->
<div id="Purchasing-Online" class="tabcontent">
<button class="accordion">Section 1</button>
<div class="panel">
<p>text goes here</p>
</div><br>
<button class="accordion">Section 2</button>
<div class="panel">
<p>text goes here</p>
</div><br>
<button class="accordion">Section 3</button>
<div class="panel">
<p>text goes here</p>
</div>
</div>
<div id="productinformation" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="payment" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="shipping" class="tabcontent">
<h3>Oslo</h3>
<p>Oslo is the capital of Norway.</p>
</div>
<div id="returns" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="contactus" class="tabcontent">
<h3>Oslo</h3>
<p>Oslo is the capital of Norway.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
<script>
function openFAQ(faqPanel,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(faqPanel).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<!--BODY END-->
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
答案 0 :(得分：0)
：active 是一个伪类，表示元素的状态。但 .active 是一个类，因此您只需将此类添加到已单击并变为活动状态的元素即可。然后，当您单击其他元素时，需要从先前活动的元素中删除 .active 类并将其添加到当前，如下所示：
db.Wait你可以改变.active按钮的颜色：
$('.topnav > a').click(function() {
// check if current element doesn't active
if(!$(this).hasClass('.active')) {
// then remove ".active" class from all **.topnav > a** elements
$('.topnav > a.active').removeClass('active');
// and add ".active" class to clicked element
$(this).addClass('active');
} else {
return false;
}
答案 1 :(得分：0)
.active {
color: red;
}
在javascript中，您可以删除名为＆＃39; active＆＃39;从所有标签中，然后添加课程“活跃”＆＃39;你要改变的地方
答案 2 :(得分：0)
如果您使用的是jQuery，那么以下代码将对您有所帮助。
<script type="text/javascript">
$(document).ready(function() {
$(".topnav > a").click(function(event) {
$(".topnav > a").css('color','black');
$(this).css('color','red');
});
});
</script>