点击链接点击

时间:2017-12-14 20:29:16

标签: javascript html css popup

我的网站目前正在建设中,所以我试图在标题链接上添加一点点弹出“即将推出”或类似的东西。你点击它,它就会在链接附近弹出。

这是我正在关注的教程,但无法使用我自己的代码。在这一点上,生病了。

https://www.w3schools.com/howto/howto_js_popup.asp

我觉得我需要做的就是为每个链接添加一个特定的类,只要添加了这个类,或者类似的东西在我看来是最好的。

所以想要把它添加到关于我们,我们的工作和服务按钮。

<ul class="nav">
    <div class="new">
        <li><a href="/">HOME</a></li>
        <li><a href="/aboutus/">ABOUT US</a></li>                   
        <li><a href="/ourwork/">OUR WORK</a></li>
        <li><a href="/services/">SERVICES</a></li>
    </div>
</ul>

@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Roboto:bold');
@import url('https://fonts.googleapis.com/css?family=Roboto:100');
@import url('https://fonts.googleapis.com/css?family=Roboto:600');

@font-face {
  font-family: "roboto";
  src: url('https://fonts.googleapis.com/css?family=Roboto');
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  top: 0;
  background-image: url('images/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color:#e0e0e0;
}

.logo {
  width: 150px;
  fill: white;
  display: block;
  position: relative;
  padding: 23px 0px 0px 50px;
}

.logo svg {
  position: absolute;
  top: 0px;
  right: 0px;
}

#hireus {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px;
  font-family: proxima nova;
  font-size: 12px;
  text-decoration: none;
  color: white;
  margin: 27px 50px 0px 0px;
  text-decoration: none;
  z-index: 10;
}

.intro {
  height: 100%;
  width: 100%;
  margin: auto;
  display: table;
  /*
	top: 0;
	background-image: url('images/bg.png');
	background-size: cover;
	background-position: center;
    background-repeat: no-repeat;
*/
}

.intro .inner {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  max-width: none;
}


/* was ul */
.nav {
  list-style-type: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
  display: table;
  margin: 0;
  width: 100%;
  text-align: center;
  padding: 0
}

li {
  /*
	width: 120px;
	height: 40px;
*/
  margin: 0px 0px;
  display: inline-block;
  padding: 0;
  font-family: proxima nova;
  font-size: 10px;
  text-decoration: none;
}

.new a {
  display: block;
  /*
	width: 120px;
	height: 40px;
*/
  /* 	line-height: 40px; */
  text-decoration: none;
  text-align: center;
  color: white;
  /* 	margin: 20px 20px; */
  margin: 32px 20px 0px 20px;
}

.content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 7%;
}

.content h1 {
  font-family: proxima nova;
  font-size: 520%;
  font-weight: bold;
  color: white;
  margin: 0;
  padding-bottom: 3px;
}

.content p {
  font-family: proxima nova;
  font-size: 12px;
  font-weight: 100;
  color: white;
  margin: 0 auto;
  max-width: 420px;
  padding-bottom: 25px;
}

.btn {
  font-family: proxima nova;
  font-size: 14px;
  font-weight: bold;
  color: white;
  text-decoration: none;
  border: solid 1px white;
  /* 	padding: 10px 100px; */
  border-radius: 60px;
  transition: all 0.5s;
  width: 160px;
  display: inline-block;
  text-align: center;
  padding-top: 13px;
  padding-bottom: 13px;
}

.btn:hover {
  color: #b0ccff;
  border: solid 1px #b0ccff;
}

.btn2 {
  font-family: proxima nova;
  font-size: 14px;
  font-weight: bold;
  color: white;
  text-decoration: none;
  border: solid 1px #0B315C;
  /* 	padding: 10px 100px; */
  border-radius: 60px;
  transition: all 0.5s;
  width: 160px;
  background-color: #0B315C;
  display: inline-block;
  text-align: center;
  padding-top: 13px;
  padding-bottom: 13px;
  margin-left: 30px;
  -webkit-box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
}

.btn2:hover {
  color: #b0ccff;
  border: solid 1px #b0ccff;
}

#scroll {
  color: green;
}

.title {
  font-family: proxima nova;
  font-size: 50px;
  font-weight: 600;
  color: black;
  text-align: center;
  margin-top: 60px;
  padding-bottom: 2px;
}

.subtitle {
  font-family: proxima nova;
  font-size: 12px;
  font-weight: 200;
  color: #9D9D9D;
  text-align: center;
  margin-top: -45px;
  padding-bottom: 2px;
}

#second {
  border-bottom: 1px solid #E6E6E6;
  width: 480px;
  margin: auto;
}

#Layer_1 {
  width: 100px;
  height: 100px;
}

#group2 {}

.whatwedo {
  text-align: center;
  width: 100%;
  margin-top: 100px;
}

.subject {
  text-align: center;
  width: 300px;
  display: inline-block;
  margin: 0px 50px;
}

.subject img{
	width: 100px;
}

.subject h2 {
  font-family: proxima nova;
  font-size: 20px;
  font-weight: 600;
  color: black;
  margin-bottom: 12px;
}

.desc {
  font-family: proxima nova;
  font-size: 12px;
  font-weight: 200;
  color: #9D9D9D;
}

.group3 {
  position: relative;
  text-align: center;
  color: white;
  margin-top: 90px;
  
  
  
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: proxima nova;
  font-size: 24px;
  font-weight: 100;
  color: white;
  width: 550px;
}

form {
  display: table;
  margin: 0 auto;
}

#forth {
  width: 100%;
}

#forth h2{
  margin-bottom: 20px;
}

input[type=text],
select {
  width: 400px;
  padding: 13px 20px;
  margin: 8px 0;
  display: inline-block;
  border-radius: 30px;
  box-sizing: border-box;
  font-family: proxima nova;
  font-size: 14px;

}

input[type=submit] {
  width: 160px;
  background-color: #4CAF50;
  color: white;
  padding: 13px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  background-color: #0B315C;
  font-family: proxima nova;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  bottom: 42px;
  margin: -9px 0px 0px 240px;
}

.email-form {
    width: 400px;
}

.email-form input {
    border: 0;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

#hi{
	background-color: #F9F9F9;
	margin-top: -64px;
	padding-top: 150px;
	padding-bottom: 120px;
}






footer {
  background-color: #30659B;
  width: 100vw;
  
}

.logo2 {
  width: 150px;
  fill: white;
  display: block;
}

.nav2 {
  padding:0;
  list-style-type: none;
  color: white;
  display: flex;  /*Generates a flexbox layout with default flex direction as row */
  width: 100%; /* Not really required */
  height:100px;
  align-items: center; /*Aligns contents vertically */
  justify-content: space-around;
  margin: 0px;
}

li {
  padding:0;
  font-family: proxima nova;
  font-size: 10px;
  text-decoration: none;
  text-align:center;
  margin:5px;
}
li:first-child{
margin-left:100px;
}
li:last-child{
margin-right:100px;
}

li a {
  text-decoration: none;
  color: white;
}







/*--- Media Queries --*/

@media screen and (max-width: 900px) {
  .content {
    padding-bottom: 10%;
  }
  .content h1 {
    font-size: 400%
  }
  .btn {
    font-size: 110%;
    padding: 9px 43px;
  }
}

@media screen and (max-width: 768px) {
  .content {
    padding-bottom: 12%;
  }
  .content h1 {
    font-size: 300%
  }
  .btn {
    font-size: 100%;
    padding: 9px 43px;
  }
}

@media screen and (max-width: 480px) {
  .content {
    padding-bottom: 14%;
  }
  .content h1 {
    font-size: 300%
  }
  .btn {
    font-size: 100%;
    padding: 10px 44px;
  }
}
<!DOCTYPE html>
<head>
	<title>Launchpad | Web design and marketing</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<link href="css/animate.css" rel="stylesheet"/>
	<link href="css/waypoints.css" rel="stylesheet"/>
	
	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
    
	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
	<script src="js/waypoints.js" type="text/javascript"></script>
	
	
</head>
<body>
	

		
		    <div class="logo">
        <svg class="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path 								d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path 	d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05,4.05a6.47,6.47,0,0,0,5-2.5V18.88h5.78v22h-5.78Z"/><path d="M135.5,27.57c0-3-1.59-4.1-4.05-4.1a6.26,6.26,0,0,0-5,2.59V40.86h-5.78v-22h5.78v2.87a10.07,10.07,0,0,1,7.69-3.41c4.82,0,7.15,2.73,7.15,7V40.86H135.5Z"/><path d="M157.26,18.33c4.51,0,7.24,2,8.69,4l-3.78,3.5a5.44,5.44,0,0,0-4.64-2.37c-3.5,0-6,2.55-6,6.37s2.46,6.42,6,6.42a5.55,5.55,0,0,0,4.64-2.37L166,37.4c-1.46,2-4.19,4-8.69,4-6.78,0-11.65-4.78-11.65-11.56S150.48,18.33,157.26,18.33Z"/><path d="M184.61,27.48c0-3-1.59-4-4.1-4a6.4,6.4,0,0,0-5,2.59V40.86h-5.78V10.5h5.78V21.74a10.17,10.17,0,0,1,7.74-3.41c4.82,0,7.15,2.64,7.15,6.92V40.86h-5.78Z"/><path d="M196.12,49.24V18.88h5.78v2.78a8.49,8.49,0,0,1,6.78-3.32c5.64,0,9.74,4.19,9.74,11.52s-4.1,11.56-9.74,11.56A8.4,8.4,0,0,1,201.9,38v11.2Zm10.74-25.76a6.47,6.47,0,0,0-5,2.5v7.78a6.62,6.62,0,0,0,5,2.5c3.32,0,5.55-2.59,5.55-6.42S210.19,23.47,206.86,23.47Z"/><path d="M235.94,38.59a9.1,9.1,0,0,1-7,2.82c-3.51,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87a14.42,14.42,0,0,1,9.6-3.46c5,0,9.6,2,9.6,8.33v14.2h-5.78Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M262.57,38.08a8.62,8.62,0,0,1-6.78,3.32c-5.55,0-9.74-4.19-9.74-11.51s4.14-11.56,9.74-11.56a8.47,8.47,0,0,1,6.78,3.37V10.5h5.83V40.86h-5.83Zm0-12.11a6.36,6.36,0,0,0-5-2.5c-3.28,0-5.55,2.59-5.55,6.42s2.28,6.37,5.55,6.37a6.36,6.36,0,0,0,5-2.5Z"/><path d="M7.56,38.52l8.13,10.73a1.41,1.41,0,0,0,2.16,0L26,38.52a1.34,1.34,0,0,0-.56-2L18.53,33A4,4,0,0,0,15,33l-6.89,3.5A1.34,1.34,0,0,0,7.56,38.52Z"/><path d="M30.31,14.15,18.12.82a1.91,1.91,0,0,0-2.7,0L3.23,14.15a4,4,0,0,0-1,2.16L-.38,34.52c-.13.9,1,1.53,1.93,1.07L4.29,34.2l12.48-6.37L29.25,34.2,32,35.59c.92.47,2.06-.17,1.93-1.07l-2.57-18.2A4,4,0,0,0,30.31,14.15Z"/></svg>
    </div>
    
    <a id="hireus" href="/">HIRE US</a>

	<ul class="nav">
		<div class="new">
			<li><a href="/">HOME</a></li>
			<li><a href="/aboutus/">ABOUT US</a></li>					
			<li><a href="/ourwork/">OUR WORK</a></li>
			<li><a href="/services/">SERVICES</a></li>
		</div>
	</ul>
	
	<section class="intro">
				
		<div class="inner">	
			<div class="content">
				<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.2s">
					<h1>Welcome to Launchpad</h1>
					<p>We are a creative agency who specializes in digital marketing and graphic design. Let us launch your business to the next level!</p>
				</section>
				
				<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.7s">
					<a class="btn" href="#">Hire Us</a>
					<a class="btn2" href="#">Learn More</a>
				</section>
			</div>
		</div>
		
	</section>
	
	<div id="second">
		<h2 class="title">What we do</h2>
		<p class="subtitle">Let us take your buisness to the next level.</p>
	</div>
	
	
	
	
	
	<div class="group2">
		<div class="whatwedo">
			
			<div class="subject" id="customdesign">
				<img src="images/customdesign.svg" alt="Custom Design">
				<h2 class="title2">Custom Design</h2>
				<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
			</div>
			
			<div class="subject" id="contentmarketing">
				<img src="images/contentmarketing.svg" alt="Content Mrketing">
				<h2 class="title2">Content Marketing</h2>
				<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
			</div>
			
			<div class="subject" id="emailmarketing">
				<img src="images/emailmarketing.svg" alt="Email Marketing">
				<h2 class="title2">Email Marketing</h2>
				<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
			</div>
			
		</div>
	</div>
	
<div class="group3">
  <img src="images/testimonialbg.png" alt="Norway" style="width:100%;">
  <div class="centered">&ldquo;The team at Launchpad exceeded our expectations! 
They have a bright future ahead of them.&rdquo;<br>
<span style="font-weight: 600;">Sam Molloy, Unmatched Masonry</span></div>
</div>
	
<!--
		<div id="second">
		<h2 class="title">Our work</h2>
		<p class="subtitle">Nervous about taking off? Here's the portfolio.</p>
		</div>
-->
<div id="hi">
		<div id="forth">
			<h2 class="title">Lets get in touch</h2>
	
			<form action="mailto:contact@madebylaunchpad.com" method="post" enctype="text/plain" class="email-form">
				<input type="text" name="mail" placeholder="Your email address"><br>
				<input type="submit" value="Lets talk">
			</form>

		</div>
		
</div>

<footer>
  <ul class="nav2">
    <li class="li2"><a href="/aboutus">ABOUT US</a></li>
    <li class="li2"><a href="/ourwork">OUR WORK</a></li>
    <li class="li2"><a href="/services">SERVICES</a></li>
  <li>
  <div class="logo2">
    <svg class="logo2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path 								d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path 	d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05,4.05a6.47,6.47,0,0,0,5-2.5V18.88h5.78v22h-5.78Z"/><path d="M135.5,27.57c0-3-1.59-4.1-4.05-4.1a6.26,6.26,0,0,0-5,2.59V40.86h-5.78v-22h5.78v2.87a10.07,10.07,0,0,1,7.69-3.41c4.82,0,7.15,2.73,7.15,7V40.86H135.5Z"/><path d="M157.26,18.33c4.51,0,7.24,2,8.69,4l-3.78,3.5a5.44,5.44,0,0,0-4.64-2.37c-3.5,0-6,2.55-6,6.37s2.46,6.42,6,6.42a5.55,5.55,0,0,0,4.64-2.37L166,37.4c-1.46,2-4.19,4-8.69,4-6.78,0-11.65-4.78-11.65-11.56S150.48,18.33,157.26,18.33Z"/><path d="M184.61,27.48c0-3-1.59-4-4.1-4a6.4,6.4,0,0,0-5,2.59V40.86h-5.78V10.5h5.78V21.74a10.17,10.17,0,0,1,7.74-3.41c4.82,0,7.15,2.64,7.15,6.92V40.86h-5.78Z"/><path d="M196.12,49.24V18.88h5.78v2.78a8.49,8.49,0,0,1,6.78-3.32c5.64,0,9.74,4.19,9.74,11.52s-4.1,11.56-9.74,11.56A8.4,8.4,0,0,1,201.9,38v11.2Zm10.74-25.76a6.47,6.47,0,0,0-5,2.5v7.78a6.62,6.62,0,0,0,5,2.5c3.32,0,5.55-2.59,5.55-6.42S210.19,23.47,206.86,23.47Z"/><path d="M235.94,38.59a9.1,9.1,0,0,1-7,2.82c-3.51,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87a14.42,14.42,0,0,1,9.6-3.46c5,0,9.6,2,9.6,8.33v14.2h-5.78Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M262.57,38.08a8.62,8.62,0,0,1-6.78,3.32c-5.55,0-9.74-4.19-9.74-11.51s4.14-11.56,9.74-11.56a8.47,8.47,0,0,1,6.78,3.37V10.5h5.83V40.86h-5.83Zm0-12.11a6.36,6.36,0,0,0-5-2.5c-3.28,0-5.55,2.59-5.55,6.42s2.28,6.37,5.55,6.37a6.36,6.36,0,0,0,5-2.5Z"/><path d="M7.56,38.52l8.13,10.73a1.41,1.41,0,0,0,2.16,0L26,38.52a1.34,1.34,0,0,0-.56-2L18.53,33A4,4,0,0,0,15,33l-6.89,3.5A1.34,1.34,0,0,0,7.56,38.52Z"/><path d="M30.31,14.15,18.12.82a1.91,1.91,0,0,0-2.7,0L3.23,14.15a4,4,0,0,0-1,2.16L-.38,34.52c-.13.9,1,1.53,1.93,1.07L4.29,34.2l12.48-6.37L29.25,34.2,32,35.59c.92.47,2.06-.17,1.93-1.07l-2.57-18.2A4,4,0,0,0,30.31,14.15Z"/></svg>
  </div></li>
		<li class="li3"><a href="/aboutus">TWITTER</a></li>
		<li class="li3"><a href="/ourwork">FACEBOOK</a></li>
		<li class="li3"><a href="/services">INSTAGRAM</a></li>
	</ul>

</footer>  	

</body>
</html>

2 个答案:

答案 0 :(得分:0)

以下代码正在运行:

&#13;
&#13;
\\/
&#13;
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
&#13;
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我为您构建了一个非常简单的示例,我将在此处为您提供代码。

首先,它在行动中:

&#13;
&#13;
var selector = document.getElementById('showHide');

selector.onclick = function(){
	var show = document.getElementById('hidden');
  show.style.display = "block"
};
&#13;
<ul class="nav">
    <div class="new">
        <li  id="showHide"><a href="/">HOME</a></li>
        <li id='hidden' style='display: none;'>Hello</li>
        <li><a href="/aboutus/">ABOUT US</a></li>                   
        <li><a href="/ourwork/">OUR WORK</a></li>
        <li><a href="/services/">SERVICES</a></li>
    </div>
</ul>
&#13;
&#13;
&#13;

这将是您的导航栏。如你所见,我做了一些改变。我给你的主页按钮一个id,以便我们以后可以调用它。我还添加了一个新的<li>标记,该标记在网站上隐藏了&#34; display:none&#34;。

<ul class="nav">
    <div class="new">
        <li id="showHide"><a href="/" >HOME</a></li>
        <li id='hidden' style='display: none;'>Hello</li>
        <li><a href="/aboutus/">ABOUT US</a></li>                   
        <li><a href="/ourwork/">OUR WORK</a></li>
        <li><a href="/services/">SERVICES</a></li>
    </div>
</ul>

这是神奇的

var selector = document.getElementById('showHide');

selector.onclick = function(){
    var show = document.getElementById('hidden');
  show.style.display = "block"
};

在顶部我们创建一个选择器变量来告诉它我们想要定位的内容,对我们来说这将是Home按钮。

下面我们编写一个在单击选择器时触发的函数。当它被触发时,我们定义我们想要改变的东西(在这种情况下,这将是id为&#34的元素;隐藏&#34;)。之后,我们只需编辑它的显示属性即可显示。