Question

我这里有这个页面，它将按类别列出合作伙伴。

https://www.stirringminds.com/partners/

如果您点击侧边栏类别，该链接将保持下划线，但如果您点击页面中的任何位置，该链接将变为非活动状态。

CSS：

button:hover { 
    text-decoration: underline;
    color:#000;
}
button:focus { 
    text-decoration: underline;
    color:#000;
}
button:active { 
    text-decoration: underline;
    color:#000;
}
button:visited { 
    text-decoration: underline;
    color:#000;
}

HTML：

<button id="showall" style="border:none;">All Deals</button>
<button id="show" style="border:none;">Business</button>
<button id="show2" style="border:none;">Design</button>
<button id="show3" style="border:none;">Development</button>
<button id="show4" style="border:none;">Marketing</button>

除非我点击类别中的其他按钮，否则链接如何保持加下划线？

感谢。

Answer 1

使用jquery，您可以在点击时指定一个添加下划线的类。

＆＃13;

var $buttons = jQuery('button');
$buttons.on('click',function() {
  jQuery(this).toggleClass('active').siblings('button').removeClass('active');
})

＆＃13;

button:hover, button:focus, button:active, button:visited, .active { 
    text-decoration: underline;
    color:#000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showall" class="active" style="border:none;">All Deals</button>
<button id="show" style="border:none;">Business</button>
<button id="show2" style="border:none;">Design</button>
<button id="show3" style="border:none;">Development</button>
<button id="show4" style="border:none;">Marketing</button>

＆＃13;

纯粹的js版本就像......

＆＃13;

var buttons = document.getElementsByTagName("button");

function setActive(el) {
  for (var i = 0; i < buttons.length; i++) {
      if (buttons[i] == el) {
        el.classList.toggle("active");
      } else {
        buttons[i].classList.remove('active');
      }
    }
}

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    setActive(this);
  });
}

＆＃13;

button:hover, button:focus, button:active, button:visited, .active { 
    text-decoration: underline;
    color:#000;
}

＆＃13;

<button id="showall" class="active" style="border:none;">All Deals</button>
<button id="show" style="border:none;">Business</button>
<button id="show2" style="border:none;">Design</button>
<button id="show3" style="border:none;">Development</button>
<button id="show4" style="border:none;">Marketing</button>

＆＃13;

Answer 2

也许你应该添加一个名为＆＃34; sidebarbuttons＆＃34;到所有链接，然后将以下onclick事件附加到该类的所有按钮：

library(lme4)

vars = names(mtcars)[c(1,5,6,7)]

models = lapply(setNames(vars, vars), function(var) {
  form = paste("cyl ~ disp + hp + ", var, "+ (carb|gear)")
  lmer(form, data=mtcars)
})

这将使用类＆＃34; sidebarbuttons＆＃34;删除所有元素的下划线。然后将下划线仅添加到单击的元素。

Answer 3

ONE Link活跃一次现在。你就是这样做的：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index950</title>
    <style type="text/css">
        .keepShow {
            text-decoration: underline;
            color: #000;
        }
    </style>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".ap").click(function (event) {
                $(".ap").removeClass("keepShow");
                $(this).addClass("keepShow");
            })
        })
    </script>
</head>
<body>
    <div>
        <button id="showall" class="ap" style="border:none;">All Deals</button>
        <button id="show" class="ap" style="border:none;">Business</button>
        <button id="show2" class="ap" style="border:none;">Design</button>
        <button id="show3" class="ap" style="border:none;">Development</button>
        <button id="show4" class="ap" style="border:none;">Marketing</button>
    </div>
</body>
</html>

Answer 4

普通的旧javascript：

var catButtons = document.querySelectorAll(".wpb_wrapper button");
catButtons.forEach(function(){
  catButtons[i].addEventListener('click', function(){
    //remove all other active classes first
    document.querySelectorAll(".wpb_wrapper button").forEach(function(){
      this.classList.remove("active");
    });
    this.classList.toggle("active"); //add to current
  });
});

使链接保持下划线，直到只有其他按钮被单击

4 个答案: