水平对齐按钮并显示活动按钮答案

【问题标题】：Align Buttons Horizontally and Show Active Button水平对齐按钮并显示活动按钮
【发布时间】：2021-09-13 22:19:27
【问题描述】：

我有以下四个按钮，每个按钮都执行 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>

我很好奇我该怎么做

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

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

【问题讨论】：

标签： javascript jquery css bootstrap-4

【解决方案1】：

将按钮设为内联块：

form[action^="books/"] {
  display: inline-block;
}

<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>

类的jQuery：

$('form[action^="books/"] > input').on("click", function (event) {
  if (event.target !== this) return; //Event was bubbled to the form
  
  event.preventDefault(); //Prevent the submission, can be removed as it is purely for example
  
  $('form[action^="books/"] > input').removeClass("btn-success");
  
  $(this).addClass("btn-success");
});

form[action^="books/"] {
  display: inline-block;
  margin: 5px; /*Fix position*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

希望这会有所帮助！

【讨论】：

如果你倾斜你的头，那么它是垂直的，但问题是文本旋转了90度！
谢谢！简单的CSS是我所缺少的。关于 jQuery，是否需要为每个按钮分配 ID，并且在每次单击时，从所有其他按钮中删除类 btn-success 并将其分配给被单击的按钮？由于 POST 请求重新加载页面而不确定
我会更新评论。抱歉，拖了这么久。

【解决方案2】：

您好，我认为您可以查看 Flexbox 的 CSS 问题。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

对于第二个问题，如果做了一些事情，但我不知道它是否是您正在寻找的正确答案。我不知道这是否可能，因为如果您提交表单，浏览器会刷新页面，因此页面与开始时相同。如果您使用 JS 或 jQuery 更改页面中的某些内容，则会消失，这是因为刷新。

PS 我是堆栈溢出的初学者，所以如果我有什么问题，请给我反馈意见。

$(() => {
  $('.btn').click(function(event) {
    currentButton = event.currentTarget;
    $(currentButton).toggleClass( "btn-success" );
  });
});

.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
  padding: 16px
}

<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">


<div class="container">
  <button class="btn btn-md">Example button to test the jQuery</button>
  <form action="#" 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>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

【讨论】：

【解决方案3】：

关于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>

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

【讨论】：