我正在尝试根据单击时的菜单选项 (javascript) 显示自定义文本。所选菜单项也旨在使用提供的颜色 (css) 突出显示。
文本在点击时出现，但只是消失了一小部分，菜单项也没有获得突出显示的颜色。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.selectedNav{
background-color: #38C1D2;
}
</style>
</head>
<body>
<aside>
<div style="width: 100%; overflow: hidden;">
<div style="float:left;width:100px;">
<nav id="main-nav">
<a href="" class=selectedNav onclick="setSelectedTab('home')"><i class="material-icons md-36">home</i><p>Home</p></a>
<a href="" onclick="setSelectedTab('projects')"><i class="material-icons md-36">image</i><p>Projects</p></a>
<a href="" onclick="setSelectedTab('about')"><i class="material-icons md-36">person</i><p>About</p></a>
<a href="" onclick="setSelectedTab('contact')"><i class="material-icons md-36">mail</i><p>Contact</p></a>
</nav>
</div>
<div style="margin-left:101px;border-radius:5px;font-size:13px;text-align:left;width:150px;height:100%;">
<p id="navDescription" style="padding:10px;"></p>
</div>
</div>
</aside>
<script type="text/javascript">
function setSelectedTab(selected){
if(selected === 'home')
{
document.getElementById('main-nav').querySelectorAll("a")[0].className = "selectedNav";
texttoshow = "<u>WELCOME</u><br><br>Thanks for visiting my site...<br>Scroll down to learn more about me... ";
}
else if(selected === 'projects')
{
document.getElementById('main-nav').querySelectorAll("a")[1].className = "selectedNav";
texttoshow = "Check on my projects here..";
}
else if(selected === 'about')
{
document.getElementById('main-nav').querySelectorAll("a")[2].className = "selectedNav";
texttoshow = "Learn more about me here.. ";
}
else if(selected == 'contact')
{
document.getElementById('main-nav').querySelectorAll("a")[3].className = "selectedNav";
texttoshow = "Reach me by sending a message";
}
document.getElementById("navDescription").innerHTML = texttoshow;
}
</script>
</body>
</html>
我希望主页文本显示为默认值，直到单击其他菜单选项为止。
最佳答案
如果您在浏览器上运行您的代码并仔细查看重新加载按钮，您会注意到当您单击链接时它会闪烁。这意味着每次您单击链接时页面都会重新加载，这就是文本出现的速度比消失的速度快的原因，因为页面会重新加载到其原始状态。要解决该问题，请将 a 标记的 href 属性设置为 "#"
<a href="#" class=selectedNav onclick="setSelectedTab('home')"><i class="material-icons md-36">home</i><p>Home</p></a>
<a href="#" onclick="setSelectedTab('projects')"><i class="material-icons md-36">image</i><p>Projects</p></a>
<a href="#" onclick="setSelectedTab('about')"><i class="material-icons md-36">person</i><p>About</p></a>
<a href="#" onclick="setSelectedTab('contact')"><i class="material-icons md-36">mail</i><p>Contact</p></a>
您还可以将默认的 #navDescription 文本设置为 html 中的“主页”文本
<p id="navDescription" style="padding:10px;">
<u>WELCOME</u><br><br>Thanks for visiting my site...<br>Scroll down or use the navigation to check on my projects and learn more about me...
</p>
关于javascript - 更改段落文本并突出显示菜单项单击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56066919/