Question

我正在参加入门级的HTML / CSS / JS课程，我们的第一个任务是创建一个关于我们自己的简单网站。我们需要一个水平菜单，点击时显示某些信息。例如，点击＆＃34;说明＆＃34;应该显示描述自己的短段落。根据我的研究，似乎我的答案在于使用JQuery，但我不相信他希望我们知道这一点，也不会早期使用它。还有其他选择我可能没有看到吗？

<html>

<head>
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="style.css">
<title>Jeremy Ortiz</title>
<div id="header">
<h1>A Little About Jeremy Ortiz</h1>
</div>

</head>

<body>
    <img src="hwpic.jpg" alt="Me">

    <div id="content">
    <div id="nav">
     <h2>Navigation</h2>
     <ul>
      <li><a class="selected" href="">Description</a></li>
      <li><a href="">A form</a></li>
      <li><a href="">Course List</a></li>
      <li><a href="">Table</a></li>
      <li><a href="">Contact Information</a></li>
     </ul>
    </div>
</body>
</html>



#header {
    padding: 10px;
    background-color: #6CF;
    color: white;
    text-align: center;
}

img {
    position: absolute;
    right: 7px;
    bottom: 148px;
    z-index: -1;
}

#content {
    padding: 10px;
}

#nav {
    width: 180px;
    float: left;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

Answer 1

我的回答将假设您的目标是使用基本Javascript完成此任务，而不是通过使用<a>元素导航用户来更改页面。我知道有更有效的方法来执行此操作，但我选择以希望简单易读的方式呈现信息。

我实现这一目标的方法是更改<a>元素：

<a class="selected" href="">Description</a>

要按钮元素并添加＆＃39; onclick＆＃39;具有在单击按钮时调用的函数的属性：

<button onclick="displayDescription()">Click Me</button>

现在我们需要创建单击按钮时显示的元素。为此，我们创建了一些<div>其他容器，我们可以隐藏它，直到单击相应的按钮。

<div id="description" style="display: none;">
  Displayed when the description button is clicked.
</div>

注意**对于每个按钮，我们需要创建一个<div style="display: none;">来隐藏信息，直到点击相应的按钮。

现在我们可以创建我们的Javascript函数：

function displayDescription() {
    var x = document.getElementById('description');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

再次注意，在此方法中，每个Javascript函数将以相同的方式映射到一个按钮，每个隐藏将映射到同一个按钮。

如果您需要更多帮助，我建议您查看w3schools，特别针对此问题，这里是您完成作业所需完成的链接。

http://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

我希望这很有帮助，因为我刚刚在我的一个大学课程中写了这篇文章，我可能会在今天晚些时候更正式地回答我的答案。

点击即可显示文字

1 个答案: