html5-如何将我的页面从导航> ID（navhome> #home）链接到该部分

时间：2019-07-03 04:28:29

标签： javascript html css

我正在重新设计网站，使其更加适合移动设备使用。我已经重新整理了整个网站的结构，但无法显示主页。主要部分显示徽标，导航，边际和模拟img。我正在尝试不使用iframe。我似乎无法让导航栏指向我重新创建的本地或内部页面。我尝试对此进行研究，但找不到任何可行的方法。这可能很简单，但我似乎找不到问题。请提前帮助... THX。

// JavaScript Document

function openNav() {
  document.getElementById("sidenav").style.width = "90px";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
}
@charset "UTF-8";
/* CSS Document */
body {
	margin:0 0 0 0;
	background-image:url(lines.png);
}
#wrapper {
	width:95%;
	min-width:340px;
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
	font-weight:bold;
	color:#ffffff;
	background-color:#000000;
	border-color:#ffffff;
	border-style:solid;
	border-width:0 1px 1px 1px;
	position:inherit;
 }
h1 {
  font: inherit;
}
header {
	margin:0 auto;
	position:absolute;
	z-index:6;
}
.logo {
	width:100%;
	max-width: 313px;
	height: auto;	
	padding: 10px;
}
nav {
	right:0;
	text-align:right;
	padding: 33px 10px 20px 10px;
	background-color: #4C6972;
	border-bottom: 1px solid #cccccc;
	position:relative;
	z-index:5;
}
 .menu a {
	text-decoration: none;
	font-size:13px;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:bold;
	color: #f1f1f1;	 
	padding:0 5px 0 10px;
}
.menu a:hover {
	color: #111;	
}	
span {
	color: #54d17a;
}
.hambtn, .closebtn {
	display:none;
}
main {
	height:100%;
	position:relative;
	z-index:3;
}
aside {
	margin:0 auto;
	top: 75px;
	left:0px;
	width:15%;
	font-size: 18px;
	position:absolute;
	z-index:4;
}
/*top right bottom left*/
.icon-bar {
	float:left;
	clear:left;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding:5px;
  transition: all 0.3s ease;
  color: white;
}
.icon-bar a:hover {
  background-color: #000;
}

section {
	width:100%;
	height: 100%;
	position:inherit;
	z-index:3;
	display:block;
}
#home{
	width:auto;
	height:auto;
	background:url(../home.html) no-repeat;
}
#music{
	width:auto;
	height:auto;
	background:url(../music.html) no-repeat;
}
footer {
	text-align: center;
	font-size:9px;
	font-weight:bold;
	padding: 10px;
	z-index:6;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>7-2stackoverflow</title>
<link href="css/7-2stackoverflow.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/7-2indiwirenavcol.js"></script>
</head>

<body>
<div id="wrapper">

      <header>xxxxxxx</header>

	<nav>
	  <div class="hambtn" onclick="openNav()">&#9776;</div>
		<div id="sidenav" class="menu">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
			<a href="#home">home</a>
			<a href="#music">music</a>
			<a href="#about">about</a>
			<a href="#gigs">gigs</a>
			<a href="#contact"><span>contact</span></a>
		</div>
		</nav>
	<main>
	  <aside>
		<div class="icon-bar">
XXXXXXXXXXXXXXXX       
		</div>
	  </aside>

       <section>
<div id="home"><!--one youtube vid goes here--></div>
<div id="music"><!--music player html goes here--></div>
<div id="about"><!--about html goes here--></div>
<div id="gigs"><!--gigs html goes here--></div>
<div id="contact"><!--contact form html goes here--></div>
	</section>

	  <footer>&reg;&copy; xxxxxx 2001-2019  All rights reserved</footer>   
	</main>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

您的代码运行正常。这是下面的代码段。您需要在div中填充视频，音乐等。下面是有效的代码段

// JavaScript Document

function openNav() {
  document.getElementById("sidenav").style.width = "90px";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
}
@charset "UTF-8";
/* CSS Document */
body {
	margin:0 0 0 0;
	background-image:url(lines.png);
}
#wrapper {
	width:95%;
	min-width:340px;
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
	font-weight:bold;
	color:#ffffff;
	background-color:#000000;
	border-color:#ffffff;
	border-style:solid;
	border-width:0 1px 1px 1px;
	position:inherit;
 }
h1 {
  font: inherit;
}
header {
	margin:0 auto;
	position:absolute;
	z-index:6;
}
.logo {
	width:100%;
	max-width: 313px;
	height: auto;	
	padding: 10px;
}
nav {
	right:0;
	text-align:right;
	padding: 33px 10px 20px 10px;
	background-color: #4C6972;
	border-bottom: 1px solid #cccccc;
	position:relative;
	z-index:5;
}
 .menu a {
	text-decoration: none;
	font-size:13px;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:bold;
	color: #f1f1f1;	 
	padding:0 5px 0 10px;
}
.menu a:hover {
	color: #111;	
}	
span {
	color: #54d17a;
}
.hambtn, .closebtn {
	display:none;
}
main {
	height:100%;
	position:relative;
	z-index:3;
}
aside {
	margin:0 auto;
	top: 75px;
	left:0px;
	width:15%;
	font-size: 18px;
	position:absolute;
	z-index:4;
}
/*top right bottom left*/
.icon-bar {
	float:left;
	clear:left;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding:5px;
  transition: all 0.3s ease;
  color: white;
}
.icon-bar a:hover {
  background-color: #000;
}

section {
	width:100%;
	height: 100%;
	position:inherit;
	z-index:3;
	display:block;
}
#home{
	width:auto;
	height:auto;
	background:url(../home.html) no-repeat red;
  height:100vh
}
#music{
	width:auto;
	height:auto;
	background:url(../music.html) no-repeat yellow;
   height:100vh
}
footer {
	text-align: center;
	font-size:9px;
	font-weight:bold;
	padding: 10px;
	z-index:6;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>7-2stackoverflow</title>
<link href="css/7-2stackoverflow.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/7-2indiwirenavcol.js"></script>
</head>

<body>
<div id="wrapper">

      <header>xxxxxxx</header>

	<nav>
	  <div class="hambtn" onclick="openNav()">&#9776;</div>
		<div id="sidenav" class="menu">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
			<a href="#home">home</a>
			<a href="#music">music</a>
			<a href="#about">about</a>
			<a href="#gigs">gigs</a>
			<a href="#contact"><span>contact</span></a>
		</div>
		</nav>
	<main>
	  <aside>
		<div class="icon-bar">
XXXXXXXXXXXXXXXX       
		</div>
	  </aside>

       <section>
<div id="home"><!--one youtube vid goes here--> home</div>
<div id="music"><!--music player html goes here-->music</div>
<div id="about"><!--about html goes here-->about</div>
<div id="gigs"><!--gigs html goes here-->gigs</div>
<div id="contact"><!--contact form html goes here-->contact</div>
	</section>

	  <footer>&reg;&copy; xxxxxx 2001-2019  All rights reserved</footer>   
	</main>
</div>
</body>
</html>
要将abc.html加载到您的主页中，可以使用jQuery，如下所示。确保已添加jQuery CDN 

<script>
 $(document).ready(function () {
  $('#about').load('about.html');
  $('#gigs').load('gigs.html');
  $('#contact').load('contact.html'); 
 })
</script>
相关问题
最新问题