Fatal编程技术网

Javascript 单击后显示文本

javascript css html

Javascript 单击后显示文本,javascript,css,html,onclick,Javascript,Css,Html,Onclick,我正在参加一个入门级的HTML/CSS/JS课程，我们的第一个任务是制作一个关于我们自己的简单网站。我们需要有一个水平菜单，当点击时显示某些信息。例如，单击“描述”应显示描述我们自己的短段落。根据我的研究，我的答案似乎在于使用JQuery，但我不相信他希望我们知道这一点，也不希望我们这么早就使用它。还有其他我可能看不到的选择吗 <html> <head> <meta charset="utf-8" /> <link rel="styl

我正在参加一个入门级的HTML/CSS/JS课程，我们的第一个任务是制作一个关于我们自己的简单网站。我们需要有一个水平菜单，当点击时显示某些信息。例如，单击“描述”应显示描述我们自己的短段落。根据我的研究，我的答案似乎在于使用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;
}


杰里米·奥尔蒂斯
关于Jeremy Ortiz的一点
航行

    

  • 

  • 

  • 

  • 

  • 


#标题{
填充：10px；
背景色：#6CF；
颜色：白色；
文本对齐：居中；
}
img{
位置：绝对位置；
右：7px；
底部：148px；
z指数：-1；
}
#内容{
填充：10px；
}
#导航{
宽度：180px；
浮动：左；
}
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
我的答案假设您的目标是使用基本Javascript完成此任务，而不是通过使用


我希望这会有所帮助，因为我刚刚在大学的一节课上写了这篇文章，我可能会在今天晚些时候将我的答案正式化。
只需为每个页面制作一个html文档，并将链接重定向到每个相关页面即可。（
description.html
，
contactInfo.html
，etc）无需javascript或jquery。将您的CSS张贴到如果您的作业包含使用SO来查找答案，请注意您应该首先搜索，并且仅在您的问题之前未被询问/回答时才提问。现在，甚至没有搜索和猜测。你怎么认为？以前有人问过你的问题吗？我想我可能还没有仔细研究过，但在我最初的搜索中，有很多答案指向JQuery解决方案。

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



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



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



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