Bootstrap下拉菜单点击切换背景色后闪烁恢复白色问题求助

你用JavaScript函数实现Bootstrap下拉菜单选中时切换页面背景色，但设置的背景色会闪烁一下后恢复为白色。

你的代码： #

JavaScript函数：

const changeblue=()=>{
    document.body.style.backgroundColor='blue';
    showAlert("Blue mode has been enabled", "success");
}
const changepink=()=>{
    document.body.style.backgroundColor='pink';
    showAlert("Pink mode has been enabled", "success");
}
const changeyellow=()=>{
    document.body.style.backgroundColor='yellow';
    showAlert("Yellow mode has been enabled", "success");
}

下拉菜单HTML：

<ul className="dropdown-menu">
<li><a className="dropdown-item" onClick={props.changeblue} href="/">Blue</a></li>
<li><a className="dropdown-item" onClick={props.changeyellow} href="/">Yellow</a></li>
<li><a className="dropdown-item" onClick={props.changepink}href="/">Pink</a></li>
</ul>

问题原因： #

下拉菜单里的<a>标签设置了href="/"，点击后浏览器会触发页面刷新（跳转到当前根路径）。虽然onClick事件里的函数临时设置了背景色，但页面刷新后所有DOM状态和样式都会重置，导致背景色变回默认的白色。

解决方案： #

只需要阻止<a>标签的默认跳转行为，或者移除导致跳转的href属性即可，有两种常用方式：

方式1：保留<a>标签样式，阻止默认跳转

修改onClick事件，添加参数阻止浏览器的默认跳转行为，同时可以把href改为#避免浏览器默认的无效链接样式：

<ul className="dropdown-menu">
<li><a className="dropdown-item" onClick={(e) => {
    e.preventDefault(); // 阻止默认跳转行为
    props.changeblue();
}} href="#">Blue</a></li>
<li><a className="dropdown-item" onClick={(e) => {
    e.preventDefault();
    props.changeyellow();
}} href="#">Yellow</a></li>
<li><a className="dropdown-item" onClick={(e) => {
    e.preventDefault();
    props.changepink();
}} href="#">Pink</a></li>
</ul>

方式2：移除href属性

Bootstrap的dropdown-item类即使没有href属性也能保持正常样式，直接去掉href="/"即可：

<ul className="dropdown-menu">
<li><a className="dropdown-item" onClick={props.changeblue}>Blue</a></li>
<li><a className="dropdown-item" onClick={props.changeyellow}>Yellow</a></li>
<li><a className="dropdown-item" onClick={props.changepink}>Pink</a></li>
</ul>

修改后，点击下拉选项时就不会触发页面刷新，背景色会保持你设置的颜色。

内容的提问来源于stack exchange，提问作者Nayak M