利用JS实现网页的导航(nav)图

Naraseny

已于 2022-03-07 15:36:53 修改

阅读量1.3k

点赞数

分类专栏： html JS css 文章标签： javascript css elementui

于 2022-03-07 14:54:23 首次发布

本文链接：https://blog.csdn.net/qq_62881798/article/details/123330399

版权

JS 同时被 3 个专栏收录

31 篇文章 1 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				list-style: none
			}

			#container {
				width: 512px;
				height: 302px;
				border: 1px solid red;
				margin: 0 auto;
			}

			#container .nav {
				width: 510px;
				height: 40px;
				border: 1px solid blue;
			}

			#container .content {
				width: 510px;
				height: 260px;
				border: 1px solid yellow;
			}

			ul li {
				float: left;
				width: 100px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border: 1px solid orange;
			}

			.active {
				background-color: red;
				color: yellow;
			}

			.content div {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="nav">
				<ul>
					<li class="active">等延康</li>
					<li>杨文广</li>
					<li>刘翔杨</li>
					<li>六开封</li>
					<li>写开进</li>
				</ul>
			</div>
			<div class="content">
				<div style="display: block">这是等延康的个人简介</div>
				<div>杨文广........</div>
				<div>刘翔杨</div>
				<div>六开封</div>
				<div>写开进</div>
			</div>
		</div>
		<script type="text/javascript">
			//获取页面上所有的li标签
			var oLis = document.getElementsByTagName('li');
			//content
			var content = document.querySelector('.content');
			var oDivs = content.querySelectorAll('div');
			console.log(oDivs);
			// console.log(oLis);
			for (var i = 0; i < oLis.length; i++) {
				//循环时  可以根据自定义索引设置值
				//setAttribute();设置标签的属性值
				//getAttribute() 获取属性的值
				oLis[i].setAttribute('index', i);
				index
				oLis[i].onclick = function() {
					console.log(this.getAttribute('index'));
					// console.log(this.innerHTML);
					//排它思想
					//将所有的li标签上的样式全部清空
					for (var i = 0; i < oLis.length; i++) {
						//className 设置css类选择器
						oLis[i].className = '';
					}
					//清空样式后，可以根据this获取当前点击的li
					// console.log(this.innerHTML)	
					this.className = 'active';
					// alert(i);
					//
					for (var i = 0; i < oDivs.length; i++) {
						oDivs[i].style.display = 'none';
					}
					oDivs[this.getAttribute('index')].style.display = 'block';
				};
			}
		</script>

	</body>
</html>

例子：

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>贵美商城</title>
 <link rel="stylesheet"	type="text/css"	href="css/global.css"	/>
 <link rel="stylesheet"	type="text/css"	href="css/layout.css"	/>
 	<script type="text/JavaScript">
	var strHome = 'http://www.gmgw.com';
	function addFav(){
		switch(getNav()){
			case 1:
			  window.external.addFavorite(strHome,'贵美商城');
			  break;
			case 2:
			  window.sidebar.addPanel('贵美商城',strHome,'');
			  break;
			case 0:
			  alert("加入收藏失败");
			  break;
		}		
		function getNav(){
			if(navigator.userAgent.indexOf("MSIE")!=-1)    return 1;
			if(navigator.userAgent.indexOf("Firefox")!=-1) return 2;
			return 0;
			}
	}
	function setHome(oThis){
		oThis.style.behavior='url(#default#homepage)';
		oThis.setHomePage(strHome);
		return false;
		} 	
	</script>
</head>
<body>
	<div id="container">
		<div id="header">
			<div id="logo"></div>
			<div class="upright_menu">
				<ul>
					<li class="pic pic1"></li>
					<li class="h_text"><a href="buy_commodity.htm" target="_parent">购物车</a></li>
					<li class="pic pic2"></li>
					<li class="h_text"><a href="help.htm" target="_parent">帮助中心</a></li>
					<li class="pic pic5"></li>
					<li class="h_text"><a href="JavaScript:void(0);" onclick="addFav();">加入收藏</a></li>		
					<li class="pic pic6"></li>
					<li class="h_text"><a href="JavaScript:void(0);" onclick="setHome(this);">设为首页</a></li>			
					<li class="bt login h_text"><a href="login.htm" target="_parent">登录</a></li>
					<li class="bt reg h_text"><a href="register.htm" target="_parent">注册</a></li>																																
				</ul>
			</div> <!--upright_menu	end-->
			<div class="upright_bottom">
				<ul>
					<li class="h_text	hello">你好，欢迎访问贵美商城！
						<script type="text/JavaScript">
							now=new Date;
							document.write(now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日"+now.getHours()+"点"+now.getMinutes()+"分");								
						</script>
						</li>
				</ul>
			</div> <!--upright_bottom	end-->
  		<div class="nav">
  			<ul>
  				<li><a href="index.htm" target="_parent">&nbsp;首&nbsp;&nbsp;&nbsp;页&nbsp;</a></li>
  				<li><a href="commoditys_show.htm" target="_parent">家用电器</a></li>
  				<li><a href="commoditys_show.htm" target="_parent">手机数码</a></li>
  				<li><a href="commoditys_show.htm" target="_parent">日用百货</a></li>
  				<li><a href="commoditys_show.htm" target="_parent">&nbsp;书&nbsp;&nbsp;&nbsp;籍&nbsp;</a></li>
  				<li><a href="help.htm" target="_parent">帮助中心</a></li>
  				<li><a href="help.htm" target="_parent">免费开店</a></li>
  				<li><a href="help.htm" target="_parent">全球咨询</a></li>  				
  			</ul>
  		</div>	<!--nav	end-->		
		</div> <!--header	end-->	
 </body>
</html>