JS实现在一个页面单击多个链接时，对应页面显示在本页面中的指定区域

最新推荐文章于 2022-09-25 08:11:40 发布

星辰诀

最新推荐文章于 2022-09-25 08:11:40 发布

阅读量1.4k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_46085155/article/details/110094523

版权

选项卡导航 JavaScript CSS 内容切换 HTML

关键词由CSDN通过智能技术生成

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

制作选项卡式导航——在一个页面单击多个链接时，对应页面显示在本页面中的指定区域中
tabbedNavigation.html

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>选项卡式导航</title>
	<link rel="stylesheet" href="tabbedNavigation.css" />
	<script type="text/javascript" src="tabbedNavigation.js"></script>
</head>
<body>
	<div id="container">
		<div id="title">
			<ul>
				<li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li>
				<li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li>
				<li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li>
				<li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
				<li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li>
			</ul>
		</div>
		<div id="content" class="content1">
			<div id="content1">
				<p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度-padding
			</div>
			<div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
			<div id="content3" class="hidecontent">3、需要使用到js了</div>
			<div id="content4" class="hidecontent">4、第四处</div>
			<div id="content5" class="hidecontent">5、第五处</div>
		</div>
	</div>
</body>

CSS

{
margin: 0;
padding: 0
}

body {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
text-align: center;
height: auto;
width: auto;
background-color: #666666;
font-size: 12px;
color: #000000;
}

#container {
text-align: left;
width: 760px;
height: 400px;
background-color: #FFFFFF;
padding: 20px;
}

#container #title {
height: 28px;
}

#container #title ul {
background-color: pink;
height: 28px;
}

#container #title li {
background: skyblue;
float: left;
list-style-type: none;
height: 28px;
line-height: 28px;
text-align: center;
margin-right: 1px;
}

#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
/* background: url(/texiao/tab_selected_left_bk2.gif) no-repeat left -29px; */
}

#container #title a span {
display: block;
/* background: url(/texiao/tab_selected_right_bk2.gif) no-repeat right -29px; */
padding: 0 15px;
}

#container #title #tag1 a:hover,
#container #title #tag2 a:hover,
#container #title #tag3 a:hover,
#container #title #tag4 a:hover,
#container #title #tag5 a:hover {
text-decoration: underline;
color: red;
/* background: url(/texiao/tab_selected_left_bk2.gif) no-repeat left -87px; */
}

#container #title #tag1 a:hover span,
#container #title #tag2 a:hover span,
#container #title #tag3 a:hover span,
#container #title #tag4 a:hover span,
#container #title #tag5 a:hover span {
display: block;
/* background: url(/texiao/tab_selected_right_bk2.gif) no-repeat right -87px; */
padding: 0 15px;
}

#container #title .selectli1,
#container #title .selectli2,
#container #title .selectli3,
#container #title .selectli4,
#container #title .selectli5 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(/texiao/tab_selected_left_bk2.gif) no-repeat left -87px;
}

#container #title a .selectspan1,
#container #title a .selectspan2,
#container #title a .selectspan3,
#container #title a .selectspan4,
#container #title a .selectspan5 {
display: block;
background: url(/texiao/tab_selected_right_bk2.gif) no-repeat right -87px;
padding: 0 15px 0 15px;
}

#container #content {
height: 300px;
padding: 10px;
}

.content1 {
border: 2px solid #3A81C8;
background-color: #DFEBF7;
}

.content2 {
border: 2px solid #ff950b;
background-color: #FFECD2;
}

.content3 {
border: 2px solid #FE74B8;
background-color: #FFECF5;
}

.content4 {
border: 2px solid #00988B;
background-color: #E8FFFD;
}

.content5 {
border: 2px solid #A8BC1F;
background-color: #F7FAE2;
}

.hidecontent {
display: none;
}

JS
function switchTag(tag, content) {
// alert(tag);
// alert(content);
for (var i = 1; i < 6; i++) {
if (“tag” + i == tag) {
document.getElementById(tag).getElementsByTagName(“a”)[0].className = “selectli” + i;
document.getElementById(tag).getElementsByTagName(“a”)[0].getElementsByTagName(“span”)[0].className = “selectspan” +
i;
} else {
document.getElementById(“tag” + i).getElementsByTagName(“a”)[0].className = “”;
document.getElementById(“tag” + i).getElementsByTagName(“a”)[0].getElementsByTagName(“span”)[0].className = “”;
}
if (“content” + i == content) {
document.getElementById(content).className = “”;
} else {
document.getElementById(“content” + i).className = “hidecontent”;
}
document.getElementById(“content”).className = content;
}
}

星辰诀

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS实现在一个页面单击多个链接时，对应页面显示在本页面中的指定区域

制作选项卡式导航——在一个页面单击多个链接时，对应页面显示在本页面中的指定区域中tabbedNavigation.html 选项卡式导航首页下载中心产品介绍会员注册与登录联系我们仿淘宝网站的导航效果。此方法有几个优点：1、根据字数自适应项目长度-padding 2、不同的项目使用不同的颜色来区分 3、需要使用到j
复制链接

扫一扫

专栏目录