Js中实现网页上导航条的切换功能

最新推荐文章于 2023-05-28 23:35:58 发布
最新推荐文章于 2023-05-28 23:35:58 发布
阅读量2.0k 收藏 1
点赞数 1
分类专栏： Js 文章标签： css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CNZYYH/article/details/51285723
版权

daohanqiehuan.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>daohanqiehuan.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="./daohanqiehuan.css">
    <script language="javascript" type="text/javascript">
		function qie(neirong){
			var zhao = document.getElementById("d3");
			var re =document.getElementById("d4");
			var zhao1 = document.getElementById("zs");
			var re1 =document.getElementById("rz");
			if(neirong=="zhaosheng"){
			//display 控制元素是否显示
				zhao.style.display = "block";
				re.style.display = "none";
				zhao1.style.backgroundColor="yellow";
				
			}
			else if(neirong=="rezhao"){
				zhao.style.display = "none";
				re.style.display = "block";
				re1.style.backgroundColor="yellow";
				
			}
			else if(neirong=="chuguo"){
			}
		}
		function qie1(obj){
			obj.style.backgroundColor="silver";
		}
    </script>

  </head>
  
  <body >
  <div class="div1">
  <div class="div2">
  <ul>
  <li id ="zs" οnmοusemοve="qie('zhaosheng')" οnmοuseοut="qie1(this)">招生</li>
  <li id ="rz" οnmοusemοve="qie('rezhao')" οnmοuseοut="qie1(this)">热招</li>
  <li οnmοusemοve="qie('chuguo')">出国</li>
  </ul>
  </div>
  <div id="d3" class="div3">
  <ul>
  <li><a href="#">招生招生招生招生</a></li>
  <li><a href="#">招生招生招生招生</a></li>
  <li><a href="#">招生招生招生招生</a></li>
  <li><a href="#">招生招生招生招生</a></li>
  <li><a href="#">招生招生招生招生</a></li>
  <li><a href="#">招生招生招生招生</a></li>
  <li><a href="#">招生招生招生招生</a></li>
  <li><a href="#">招生招生招生招生</a></li>
  </ul>
  </div>
  
  <div id="d4" class="div4">
  <ul>
  <li><a href="#">热招热招热招热招</a></li>
  <li><a href="#">热招热招热招热招</a></li>
  <li><a href="#">热招热招热招热招</a></li>
  <li><a href="#">热招热招热招热招</a></li>
  <li><a href="#">热招热招热招热招</a></li>
  <li><a href="#">热招热招热招热招</a></li>
  <li><a href="#">热招热招热招热招</a></li>
  <li><a href="#">热招热招热招热招</a></li>
  </ul>
  </div>
  
  </div>

  </body>
</html><strong>
</strong>

daohanqiehuan.css 

body{
	font-size:12px;
}
.div1{
	width :126px;
	height:156px;
/*	background-color:pink;*/
	float:left;
	padding:0px;
	
}

.div2{
	width:21px;
	height: 156px;
	float: left;
/*	background-color:green;*/
	padding:0px;
}

.div2 ul{
	width:21px;
	height: 150px;
	list-style-type :none;
	float:left;
	padding:0px;
	margin-left:0px;
	
}

.div2 li{
	width:21px;
	height: 47px;
	float:left;	
	background-color:silver;
/*	margin-top:10px;*/
	text-align : center;
	padding-top : 8px;
	margin-top:5px;
	
}

.div3,.div4{
		width:100px;
		height:156px;
		float:left;
		padding:0px;
/*		background-color:silver;*/
		margin-left:2px
}
.div3 ul,.div4 ul{
	width:100px;
	height:156px;
	float:left;
	list-style-type:none;
	padding:0px;
	margin-left:0px;
	
}
.div3 li,.div4 li{
	width:100px;
	heigth:18px;
	float:left;
	text-align:center;
/*	background-color:red;*/
	margin-top:6px;
	
}
.div4{
	display:none;
}


CNZYYH
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现导航栏中英文切换效果
10-20
本篇文章主要分享了javascript实现导航栏中英文切换效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
JavaScript简单的Tab栏导航——切换页面
YIC020920的博客
12-07 2935
这是昨天的一个课堂练习，简单展示一下！做的是一个简单的页面交互效果，呈现一种内嵌效果。效果图如下： 首先直接看一下它的js代码吧，在不一样的皮囊里藏着千篇一律的灵魂，主要是要体会从中的for循坏绑定点击事件。 布局和样式就直接放在一起了哈！ 感谢观看！
js实现导航栏切换
SugarXiXixi的博客
10-08 4486
导航栏切换 实现效果 一、实现 for循环嵌套遍历 按钮样式及盒子的显示与隐藏 二、使用步骤 1.js 代码如下（示例）： //游戏资讯 信息栏显示与隐藏 let game_list = document.getElementById('game') let game_info = document.getElementById('game_info') let list = document.getElementById('list') ..
js实现点击切换导航栏效果(排他思想)
weixin_46378070的博客
02-25 2656
使用html+css+js，实现简易导航栏切换效果
点击导航栏切换页面
03-24
这是一个运行在AS上的project，里面是点击导航栏切换页面的三种方式的moudle
基于jQuery实现中英文切换导航条效果
10-21
在本篇文档中，将详细探讨如何利用jQuery以及CSS3技术实现具有中英文切换功能的导航条。导航条是网站中不可或缺的组成部分，它不仅承载着快速定位网站内各个板块的功能，而且良好的导航条设计还能提升用户体验。 ...
jQuery实现的导航条切换可显示隐藏
10-25
总的来说，通过结合使用jQuery中的动画函数和CSS样式，我们可以实现一个功能丰富且用户体验良好的导航条切换显示和隐藏的效果。这些技术的应用不仅限于简单的导航条，它们也可以被广泛地应用到各种网页元素的动态...
js实现多选项切换导航菜单的方法
10-24
本文主要讲述了使用JavaScript（简称js）来实现一个多选项切换的导航菜单的方法。此方法适用于动态生成多选项切换导航菜单的场景，具备一定的实用性和技巧性，可以为有相关开发需求的朋友提供参考。 在开始前，我们...
jQuery关于导航条背景切换效果实现示例
10-26
使用jQuery实现导航条背景切换效果是网页开发中常见的需求，这一技术主要是通过JavaScript库jQuery来实现不同导航项之间的背景切换效果，增强用户的视觉体验。 jQuery是一个快速、小巧且功能丰富的JavaScript库，它...
div CSS样式表实现中英文双语切换导航条
11-21
以上就是使用`div`和CSS样式表实现中英文双语切换导航条的基本方法。通过深入理解这些技术，你可以创建出更加动态、交互性强的网页界面。同时，不断学习和实践，掌握更多的前端知识，如响应式设计、动画效果等，将有...
导航栏切换
06-26
导航栏切换
简单的JS菜单TAB切换
01-28
简单的横向JS菜单TAB切换，无需调用JQUERY，支持所有浏览器。
导航栏切换 div+css+js 源码
05-02
导航栏切换 div+css+js 源码 by Jacky
js排它思想(导航栏的切换)
weixin_61485030的博客
03-06 187
排他思想
使用JS来实现tab栏切换
最新发布
weixin_64965154的博客
05-28 3640
我们这里使用的是：document.querySelectorAll，因为要我们直接获取全部的a标签，所以我们写这个会更好，然后我们需要遍历这个a，运用到for循环。然后我们如果选择第一个，那么我们第二个就不会显示出来，所以我们选择第一个的时候得干掉第二个，这时候我们就可以使用这行代码。这是我今天从学习的知识点，今天试着做了一个tab栏切换，学到很多的知识点，讲师也比学校的老师讲的更加详细明白。这里的意思是我们每选择一个那么我们就会增加一个元素，而前面经过后就会消除掉。
导航栏实现页面的动态切换
IBLiplus的博客
08-02 8228
我们经常会在一些网站上通过点击一些导航栏中的分类来显式不同的内容来浏览，下面的方式可以实现这种效果。 function change(){ var left1 = $(".index1left"); // alert(left1.length); // id 1 2 3 4 for(var i = 0;i &lt; left1.length;i++){ lef...
JS实现导航栏项目自动切换标签样式
pinzhizun的博客
08-08 5229
导航栏：SUI 首页 产品 类别 用户 快递 JS代码如下：$(document).ready(function(){ var hr,wi $(".sui-nav >li").each(function(){ hr=$(this).find
导航栏切换内容，点击切换到对应的内容，html，css，js实现
m0_72190449的博客
01-04 6363
导航栏切换内容，点击切换到对应的内容，html，css，js实现，添加隐藏类
实现点击导航栏内容切换
qq_46617584的博客
09-05 1869
很常见的一种切换导航栏内容变化的实现方式
点击导航条使得网页内容部分改变
05-04
要实现这个功能，可以使用 JavaScript 和 HTML 来编写代码。具体的实现步骤如下： 1. 在 HTML 中设置导航条和内容部分的框架结构，可以使用 div 标签来分别表示导航条和内容部分。 2. 在导航条中添加链接，每个链接对应一个内容部分，链接的 href 属性可以设置为 JavaScript 代码，例如 href="javascript:showContent(1)"。 3. 在 JavaScript 中定义 showContent 函数，该函数接受一个参数表示要显示的内容部分的编号。可以使用数组或对象来存储内容部分的信息，例如： ``` var contents = [ {title: "Content 1", text: "This is the first content."}, {title: "Content 2", text: "This is the second content."}, {title: "Content 3", text: "This is the third content."} ]; ``` 4. 在 showContent 函数中，根据参数获取对应的内容信息，并将其显示在内容部分中，例如： ``` function showContent(index) { var content = contents[index]; document.getElementById("content-title").innerHTML = content.title; document.getElementById("content-text").innerHTML = content.text; } ``` 其中，"content-title" 和 "content-text" 分别是内容部分中标题和文本的元素 ID。 通过以上步骤，可以实现点击导航条中的链接时，切换显示不同的内容部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值