用不同的类名改变活动按钮上的CSS

Change CSS on active button with varied class names

本文关键字：按钮 活动 CSS 改变      更新时间：2023-09-26

我在我的网站的导航栏中有各种各样的按钮，我想在点击上做一些事情:

1. Open an overlay relative to the button pressed
2. Close any other open overlays
3. Add a border to the button until that button's related overlay is closed.

我的导航栏看起来像这样:

<div id="navbar">
    <div class="signup_btn">Sign Up</div>
    <div class="login_btn">Login</div>
</div>

这是覆盖html:

<div class="signup_overlay">
    <!-- FORM HERE -->
</div>
<div class="login_overlay">
    <!-- FORM HERE -->
</div>

和JQuery扩展叠加/关闭其他:

<script type="text/javascript">
$('.signup_btn').click(function() {
    $('.login_overlay').hide();
    $('.signup_overlay').slideToggle( 300 );
});
$('.login_btn').click(function() {
    $('.signup_overlay').hide();
    $('.login_overlay').slideToggle( 300 );
});
</script>

当我向导航栏添加更多按钮时，我感觉好像每个按钮都有很多不必要的CSS，以便JQuery可以获得正确的元素。有没有更干净、更有效的方法来做这件事?

此外，添加边框到按钮的底部相关的当前覆盖，这一切都应该用Javascript完成，或者有一个干净/不重复的方式做它与CSS?

您可以为所有触发器元素和覆盖层添加一个公共类，然后编写一个句柄，如下所示

<div id="navbar">
    <div class="signup_btn btn" data-target=".signup_overlay">Sign Up</div>
    <div class="login_btn btn" data-target=".login_overlay">Login</div>
</div>
<div class="signup_overlay overlay">signup_overlay</div>
<div class="login_overlay overlay">login_overlay</div>
然后

$('#navbar .btn').click(function () {
    var target = $(this).data('target');
    $('.overlay').not(target).hide();
    $(target).slideToggle(300);
});

演示:小提琴

当我向导航栏添加更多按钮时，我感觉好像每个按钮都有很多不必要的CSS，以便JQuery可以获得正确的元素。有没有更干净、更有效的方法来做这件事?

这取决于，只要你记住CSS的主要目的是为HTML元素提供样式，如果你在设计和规划你的方法时记住这一点，那么你所做的事情就没有错。

我的意思是，如果你的每个按钮需要不同的样式，那么这是最直接的方法。然而，如果你为你的按钮分配不同的CSS类仅仅是为了标记/识别每个按钮，以便jQuery针对特定的按钮，那么这是错误的…它可以工作，但对于任何有一点设计技巧的人来说，它看起来都像一种代码气味。你能做的就是……

  1. 为按钮分配不同的id，并通过id

    选择它们

    $("#element_id);

  2. 添加自定义数据属性，你可以随意命名它，例如

，然后使用不显眼的javascript选择它们

$("[data-field=login]")

此外，添加边框到按钮的底部相关的当前覆盖，这一切都应该用Javascript完成，或者有一个干净/不重复的方式做它与CSS?

如果你将display:absolute设置为覆盖层，最好使用CSS而不是javascript。你也可以给它们一个z-index，让它们位于其他元素的顶部

您可以使用一个按钮类，所有按钮具有相同的样式，并给每个按钮一个单独的id，将在您的jquery中引用。

例如:

<div id="navbar">
    <div class="btn" id="signup_btn">Sign Up</div>
    <div class="btn" id="login_btn">Login</div>
</div>
相关文章：