时间戳

首页 > 解决方案 > 水平对齐按钮并显示活动按钮

javascript - 水平对齐按钮并显示活动按钮

问题描述

我有以下四个按钮，每个按钮都执行 POST 请求，因此它们采用一种形式：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<form action="books/all" method="POST">
  <input class="btn btn-md btn-success" type="submit" value="All Books"></input>
</form>
<form action="books/fiction" method="POST">
  <input class="btn btn-md" type="submit" value="Fiction"></input>
</form>
<form action="books/biographys" method="POST">
  <input class="btn btn-md" type="submit" value="Biography"></input>
</form>
<form action="books/new" method="POST">
  <input class="btn btn-md" type="submit" value="New"></input>
</form>

我很好奇我怎么能

  1. 水平对齐四个按钮并在页面上等距分布（因此它们不都在一侧）
  2. 如何使用 JS/JQuery 或纯 CSS 使单击的按钮成为具有btn-success类的按钮，而其余按钮则没有。

这些是 POST 请求，但用户将被重定向回页面，因此理想情况下，他们最后单击的按钮应该是显示为活动的按钮。

标签： javascriptjquerycssbootstrap-4

解决方案

关于1

对齐内容有多种选择。您可以使用flexbox,grid或使用翻译来居中项目的类。在你的情况下，我可能会使用flexbox. 使用起来相当简单。

看看这里：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

关于2

我不建议您使用 重新加载页面POST-Requests。

如果这是一个硬性要求，那么您可以基于URL. 这个简单if-else的逻辑将驻留在页面控制器或您在那里使用的任何组件中。

如果这不是硬性要求，您可以使用 js 切换类。但是，这不会是持久的（即在重新加载后丢失）。在单页应用程序中，这可能就足够了。从理论上讲，您可以将选择状态保存到 cookie 或会话中，但我可能不会这样做。

还可以选择#在href. URL它将允许您在无需重新加载页面的情况下拥有某种状态。这将滚动/跳转到您引用的元素。

在下面的示例中，重新加载后选择将丢失： 

const menuItems = document.querySelectorAll('.menu a.btn');

const selectItem = (i, menuItems) => {
  for (let j = 0; j < menuItems.length; j++) {
    menuItems[j].classList.remove('btn-success');
  }
  menuItems[i].classList.add('btn-success');
}

for (let i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', (e) => {
    e.preventDefault();
    selectItem(i, menuItems);
    return false;
  });
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="menu" role="navigation">
  <a href="books/all" class="btn btn-md btn-success" role="button">All books</a>
  <a href="books/fiction" class="btn btn-md" role="button">Fiction</a>
  <a href="books/biography" class="btn btn-md" role="button">Biography</a>
  <a href="books/new" class="btn btn-md" role="button">New</a>
</nav>

你可以这样做：

const menuItems = document.querySelectorAll('.menu a.btn');

const selectItem = (i, menuItems) => {
  for (let j = 0; j < menuItems.length; j++) {
    menuItems[j].classList.remove('btn-success');
  }
  menuItems[i].classList.add('btn-success');
}

for (let i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', (e) => {
    selectItem(i, menuItems);
  });
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="menu" role="navigation">
  <a id=#books/all" href="#books/all" class="btn btn-md btn-success" role="button">All books</a>
  <a id="#books/fiction" href="#books/fiction" class="btn btn-md" role="button">Fiction</a>
  <a id=#books/biography" href="#books/biography" class="btn btn-md" role="button">Biography</a>
  <a id="#books/new"href="#books/new" class="btn btn-md" role="button">New</a>
</nav>

#也可以使用CSS选择器访问:target。

推荐阅读