水平對齊按鈕並顯示活動按鈕

Question

我有以下四個按鈕，每個按鈕都執行 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 請求，但用戶將被重定向回頁面，因此理想情況下，他們最后點擊的按鈕應該顯示為活動的。

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

希望這可以幫助！

Answer 2

您好，關於 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>

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

#也可以在CSS使用:target選擇器訪問。