Выровнять кнопки по горизонтали и показать активную кнопку

avatar
user16165663
1 июля 2021 в 21:22
67
3
0

У меня есть следующие четыре кнопки, каждая из которых выполняет запросы 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-запросы, но пользователь будет перенаправлен обратно на страницу, поэтому в идеале кнопка, которую он нажал последним, должна отображаться как активная.

Источник

Ответы (3)

avatar
ErrorGamer2000
1 июля 2021 в 21:30
0

Сделайте кнопки встроенными блоками:

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>

Надеюсь, это поможет!

Mister Jojo
1 июля 2021 в 21:33
0

если наклонить голову, то да она вертикальная, но проблема в том, что тексты повернуты на 90 градусов!

user16165663
1 июля 2021 в 21:36
0

Спасибо! Простой css - это то, чего мне не хватало. Что касается jQuery, будет ли это связано с назначением идентификаторов каждой кнопке и удалением класса btn-success из всех других кнопок при каждом щелчке и назначением его той, которая была нажата? Не уверен, потому что запрос POST перезагружает страницу

ErrorGamer2000
9 июля 2021 в 19:05
0

Я обновлю комментарий. Извините, это заняло так много времени.

avatar
F. Müller
1 июля 2021 в 22:26
0

Относительно 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.

avatar
Matthijs van der Harst
1 июля 2021 в 22:04
0

Привет, вопрос по css. Я думаю, вы можете изучить Flexbox. 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>