[英]Why isn't my CSS being applied when the class is added to the element?
What I am trying to do is, when i press a button, do put a border around it, to show it as active.我想要做的是,当我按下一个按钮时,在它周围放置一个边框,以将其显示为活动状态。 I am also trying to have in JavaScript that the button is active, but I haven't gotten to that yet.我也试图在 JavaScript 中让按钮处于活动状态,但我还没有做到这一点。 Can anyone help me?谁能帮我?
$('button').on('click', function() { $('button').removeClass('active_button'); $(this).addClass('active_button'); }); //Home button active on page load $(document).ready(function() { $('#Home').addClass('active_button'); });
.cable-choose { margin-bottom: 20px; } .cable-choose button { border: 2px solid #E1E8EE; border-radius: 6px; padding: 13px 20px; font-size: 14px; color: #5E6977; background-color: #fff; cursor: pointer; transition: all .5s; } .cable-choose button:hover, .cable-choose button:active, .cable-choose button:focus { border: 2px solid #000; outline: none; } .active_button { border: 2px solid black; }
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <div class="cable-config"> <span>Select Entries</span> <div class="cable-choose"> <button id="Home">50 Entries<br>$5.00</button> <button>100 Entries<br>$10.00</button> <button>250 Entries<br>$25.00</button> <button>500 Entries<br>$50.00</button> </div> </div>
You just need to make your CSS selector more specific .你只需要让你的 CSS 选择器更加具体。 It was being overridden by the standard button styles.它被标准按钮样式覆盖。
$('button').on('click', function() { $('button').removeClass('active_button'); $(this).addClass('active_button'); }); //Home button active on page load $(document).ready(function() { $('#Home').addClass('active_button'); });
.cable-choose { margin-bottom: 20px; } .cable-choose button { border: 2px solid #E1E8EE; border-radius: 6px; padding: 13px 20px; font-size: 14px; color: #5E6977; background-color: #fff; cursor: pointer; transition: all .5s; } .cable-choose button:hover, .cable-choose button:active, .cable-choose button:focus { border: 2px solid #000; outline: none; } .cable-choose button.active_button { /* <------------ RIGHT HERE */ border: 2px solid black; }
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <div class="cable-config"> <span>Select Entries</span> <div class="cable-choose"> <button id="Home">50 Entries<br>$5.00</button> <button>100 Entries<br>$10.00</button> <button>250 Entries<br>$25.00</button> <button>500 Entries<br>$50.00</button> </div> </div>
我认为它正在工作 - 当我检查我点击的那个时,我看到 class="active_button" ......但您的 active_button 样式与您的悬停/焦点/活动状态相同(一个设置为 #000,另一个设置为“黑色”-同色)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.