Change paragraph text and highlight on menu item click
Question
I am trying to display custom text based on the menu option on-click (javascript). The menu item selected is intended to be highlighted with a provided color too (css).
The text appears on click but just disappears in a fraction and the menu item is not getting the highlighted color too.
<!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>
I want the home text to be displayed as the default until other menu options are clicked.
1 answers
solution1
0 ACCPTED 2019-05-09 20:53:22
If you run your code on a browser and look closely at the reload button, you will notice that it blinks when you click on a link. that means that the page is reloading every time you click on a link, and that's why the text appears than disappears fast, because the page reloads into to its original state. To fix that problem you set the href attribute of the a tag to "#"
<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>
You can also set the default #navDescription text to the "Home page" text in the 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.