Question

我正在尝试基于菜单选项的单击显示（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>

我希望在单击其他菜单选项之前将默认显示为主页文本。

Answer 1

如果您在浏览器上运行代码并仔细查看重新加载按钮，您会发现单击链接时它会闪烁。这意味着每次您单击链接时都会重新加载页面，这就是为什么文本显示比消失快的原因，因为页面重新加载到了原始状态。要解决该问题，您可以将 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>

更改段落文字并在菜单项上单击以突出显示

1 个答案: