当某个元素处于“活动状态”时，如何设置文本颜色
[英]How do i set the text color when a certain element is “active”
问题描述
Im looking to get elements in the topnav class to change color when they are the ones selected. 
我正在寻找使topnav类中的元素在被选中时改变颜色。 I've tried mimicking the code that darkens the accordion class buttons with no luck (this is how i need topnav to work, only with the text changing color and not the background) 我尝试过模仿使手风琴类按钮变暗而没有运气的代码（这是我需要topnav才能工作的方式，仅在文本更改颜色而不是背景的情况下）
Also need to select the active tab when in mobile view and put that header at the top as currently it is constantly showing purchasing online even if i'm in another tab. 在移动视图中时，还需要选择活动选项卡，并将该标题放在顶部，因为当前即使我在另一个选项卡中，它仍在不断显示在线购买。
Thanks in advance! 提前致谢！
<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>
3 个解决方案
解决方案1
0 2017-07-12 01:23:01
:active is a pseudoclass, that is indicates a state of element. ：active是一个伪类，它指示元素的状态。 But .active is a class, so you can just add this class to element that has been clicked and became active. 但是.active是一个类，因此您可以将此类添加到已单击并变为活动状态的元素中。 Then, when you click to other element, you need to remove .active class from previously active element and add it to current, like this: 然后，当您单击其他元素时，需要从以前的活动元素中删除.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;
}
you can just change color of .active button: 您可以只更改.active按钮的颜色：
.topnav > a.active {
color: red;
}
解决方案2
0 2017-07-12 01:40:23
.active {
color: red;
}
In javascript, you can remove class named 'active' from all the tab, then add class 'active' to which you want to change 在javascript中，您可以从所有标签中删除名为“活动”的类，然后添加要更改的“活动”类
解决方案3
0 已采纳 2017-07-12 02:06:46
If you are using jQuery then the following code will helps you. 如果您使用的是jQuery，则以下代码将为您提供帮助。
<script type="text/javascript">
$(document).ready(function() {
$(".topnav > a").click(function(event) {
$(".topnav > a").css('color','black');
$(this).css('color','red');
});
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.