我正在嘗試制作一個頂部導航欄，但由于某種原因，我無法單擊網站內的任何按鈕。
import '../css/TopBarStyle.css'
import Logo from './Logo'
import { Outlet, Link } from "react-router-dom";
function TopNavBar() {
return (
<div className="container">
<div className='logo-div'>
<Logo />
</div>
<div className='navigation-buttons'>
<button type="submit" onClick={() => {alert("Hello")}}>Home</button>
<button>My Projects</button>
<button>About me</button>
<button>Contact</button>
</div>
</div>
);
}
export default TopNavBar;
更新（添加了 css 檔案）
我的css檔案：
.container {
margin-top: 2%;
height: 10vh;
background-color: transparent;
width: 100%;
display: flex;
flex-direction: column;
}
.navigation-buttons {
position: absolute;
text-align: end;
align-self: flex-end;
}
button {
background: rgba(255, 255, 255, 0.315);
font-size: 18px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
color: white;
padding: 15px;
margin-right: 30px;
border-radius: 12px;
border: none;
}
button:hover {
cursor: pointer;
}
我看不出問題出在哪里。我正在使用 safari，所以我無法檢查我的頁面以查看元素
uj5u.com熱心網友回復：
將型別更改為按鈕
<button type="button" onClick={() => {alert("Hello")}}>Home</button>
submit提交表單，因此您的頁面將被重新加載。
uj5u.com熱心網友回復：
import '../css/TopBarStyle.css'
import Logo from './Logo'
import { Outlet, Link } from "react-router-dom";
function TopNavBar() {
return (
<div className="container">
<div className='logo-div'>
<Logo />
</div>
<div className='navigation-buttons'>
<button type="submit" onClick={(event) => {
event.preventDefault();
alert("button clicked");
}}>Home</button>
<button>My Projects</button>
<button>About me</button>
<button>Contact</button>
</div>
</div>
);
}
export default TopNavBar;
您可以使用preventDefault()函式來避免頁面重新加載。
<button type="submit" onClick={(event) => {
event.preventDefault();
alert("button clicked");
}}>
Home </button>
uj5u.com熱心網友回復：
我已經嘗試了您的代碼并且它實際上可以作業（每當我單擊“主頁”按鈕時，都會出現一個顯示“Hello”的警告框）。
如果它不適合您，您可能想要共享 CSS 檔案，這樣我們都可以檢查樣式是否存在問題（這可能會使導航欄表現不同）。
編輯后
主要問題是按鈕有一個background: rgba(255, 255, 255, 0.315)基本上是白色的（所以如果頁面的背景也是白色的，你就看不到它們）。請注意，這color:white也會使文本變白。
您可能希望將它們更改background-color: rgba(202, 227, 209)為 例如 和color:black。這樣，您將擁有帶有黑色文本和淺灰色背景的導航按鈕。
希望有幫助！
uj5u.com熱心網友回復：
最有可能logo-div在頂部.navigation-buttons，您可以在 chrome 中按 Ctrl Shift C 來查看您單擊的內容
如果您不需要它，請洗掉或position: absolute添加到它".navigation-buttons"z-index: 100
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/463785.html
標籤：javascript html 反应