Question

因此，当您在该页面上时，我正在制作一个活动的边框按钮。但是当您按下第二个边框按钮时，第一个边框会移除，第二个边框可见。它与本网站上的内容基本相同。＆＃34;问题，工作，文档测试版，标签＆＃34;纽扣。当您在该页面上时，一个亮起，另一个关闭。我尝试在谷歌上查找但无法找到。我尝试通过＆＃34;检查元素＆＃34;来查看代码。通过谷歌浏览器。

Answer 1

确保每页都有完全相同的HTML。然后在每个页面中，通过指定“活动”按钮来区别对应按钮的样式。仅限该按钮。例如：

在主页

<a class="button active" href="index.html">Home</a>
<a class="button" href="about.html">About</a>

在“关于”页面

<a class="button" href="index.html">Home</a>
<a class="button active" href="about.html">About</a>

CSS

.button {
background-color: grey;
}

.active {
background-color: orange;
}

Answer 2

需要一点CSS和HTML。如果你想在不改变页面的情况下“激活”结果元素，你也需要一些JS。

$('button').on('click', function() {
  $('button').removeClass('active');
  $(this).addClass('active');
});

button.active {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="active">Active Page</button>
<button>Not Active Page</button>

Answer 3

我能想到的最简单的方法是在你想要点亮该页面的按钮上添加一个“活动”类。

某些页面CSS / HTML上的活动边框

3 个答案: