html简单的tab切换

最新推荐文章于 2025-07-04 10:34:48 发布

原创最新推荐文章于 2025-07-04 10:34:48 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

web开发专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS实现简单的tab切换效果，通过参考网络上的高度自适应方法，包括index.html、jbxx.html、index-style.css三个文件的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下

这里参考了网上高度自适应的方法，代码如下：

1、index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<link href="css/index-style.css" rel="stylesheet" />
<style>
body{
	margin:0; 
	padding:0;
	background-color:#f0eef5;
	overflow: hidden;
}
</style>
</head>

<body>
<div id="nav">
      <ul id="navmain"></ul>
</div>
 
<div class="swf" id = "welcome">
<embed src="images/welcom-cat.gif" type="" width="712px" height="428px">
<div style="margin-top:10px" align="center">
<button type="button" class="yongyin" onclick="funtest()" >welcome to test</button>
</div>
</div>
<div class="mainif" id="tabselect">
<!--scrolling="no"-->
<iframe style="display: flex; width: 100%;height: 100%;" src="#" id="myiframe" name="myiframe"  marginheight="0" marginwidth="0" frameborder="0" onload='iFrameHeight("myiframe")'>
</iframe>
</div>
</body>
<script src="jq/jquery.min.js"></script>
<script type="text/javascript">
/*<![CDATA[ */
var dataInfo = {menus:[{menuid:"1",icon:"icon-sys",menuname:"文件上传",url:"jbxx.html"},{menuid: "8",icon: "icon-sys",menuname: "左收缩",url:"test-expand-left.html"}]};
$(function () {
	//changeFrameHeight();
	_menus = dataInfo;
	InitTopMenu();
	//$("#navmain li").first().addClass("active");
    $('#navmain li').click(function () {
        $('#navmain li').removeClass("active");
        $(this).addClass("active");
		$("#welcome").hide();
		$("#tabselect").show();
		var menuId = $("#navmain li.active").attr("menuId");
		//设置对应的下方显示
		$.each(_menus.menus, function(i, n) {  
		    if(menuId == n.menuid){
				console.log("url = "+n.url);
				if(n.url == $("#myiframe").attr('src')){
					return;
				}
				$("#myiframe").attr('src', n.url);
		    }
		});
    });
    $(window).resize(function(){
        iFrameHeight("myiframe");
    });
});

function iFrameHeight(id) {
    var H = $(window).height();
    var changeId = "#"+id;
    $(changeId).css("height",H+"px");
}

//初始化顶部菜单
function InitTopMenu(){
	var topMenu = "";
	$.each(_menus.menus, function(i, n) {
		topMenu += "<li class=\"inactive\" menuid=\""+n.menuid+"\"><a href=\"javascript:void(0)\">"+n.menuname+"</a></li>"
	});
	$("#navmain").html(topMenu);
	console.log("_menus.menus.lenght = "+_menus.menus.length);
	if(_menus.menus.length <= 1){
		$("#nav").hide();
	}else{
		$("#nav").show();
	}
}

function funtest(){
	alert("这是欢迎页面");
}
/*]]>*/
</script>
</html>

2、jbxx.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基本信息</title>

</head>

<body>
基本信息
</body>
</html>

3、index-style.css

.swf {
            position: absolute;
            left:30%;
            top:50%;
            margin-left: -356px;
            margin-top: -215px;
        }
	.mainif{
		height:auto;
		width:100%;
		clear:both;
		margin-top:-16px;
		display:none;
	}
    .yongyin {
     width:100px;
     text-align:center;
     line-height:100%;
     padding:0.3em;
     font:16px Arial,sans-serif bold;
     font-style:normal;
     text-decoration:none;
     margin:2px;
     vertical-align:text-bottom;
     zoom:1;
     outline:none;
     font-size-adjust:none;
     font-stretch:normal;
     border-radius:50px;
     box-shadow:0px 1px 2px rgba(0,0,0,0.2);
     text-shadow:0px 1px 1px rgba(0,0,0,0.3);
     color:#ffffff;
     border:0.2px solid #d4d4d4;
     background-repeat:repeat;
     background-size:auto;
     background-origin:padding-box;
     background-clip:padding-box;
     background: linear-gradient(to bottom, #d4d4d4 0%,#363636 100%);
}
.yongyin:hover {
    background: #a1a1a1;
}
a{text-decoration:none;}
#nav { position:relative; width: 100%; clear: both; height:25px; margin-left:1px;}
#nav ul { float:left; margin:0px 10px; padding:0px;}
#nav ul li {cursor:pointer; float: left; min-width:82px;width:auto; height:25px; line-height:25px; text-align: center;  *margin-bottom:-2px; list-style-type:none;}


.inactive { 
     //background-image:url(images/imgbg02.png) !important;
	 //background: none; 
	 width:auto;
	 line-height:100%;
     padding:0.1em;
	 text-decoration:none;
	 zoom:1;
     outline:none;
     font-size-adjust:none;
     font-stretch:normal;
     border-top-left-radius:8px;
	 border-top-right-radius:8px;
     box-shadow:0px 1px 2px rgba(0,0,0,0.2);
     text-shadow:0px 1px 1px rgba(0,0,0,0.3);
     color:#ffffff;
     border:0.1px solid #aebbef;
     background-repeat:repeat;
     background-size:auto;
     background-origin:padding-box;
     background-clip:padding-box;
     background: linear-gradient(to bottom, #DDECFF 0%,#BBD8FF 100%);
	 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/admin/nav_bg_inactive2.png);
}
.inactive a {color: #000; font-weight:bold; line-height:25px;padding:5px;}
.inactive a:hover {color: #0b4bc2; font-weight:bold; line-height:25px;}
.active {
	//background:url(images/admin/nav_bg_active2.png) !important;
	//background: none; 
	width:auto;
	 line-height:100%;
     padding:0.1em;
	 text-decoration:none;
	 zoom:1;
     outline:none;
     font-size-adjust:none;
     font-stretch:normal;
     border-top-left-radius:8px;
	 border-top-right-radius:8px;
     box-shadow:0px 1px 2px rgba(0,0,0,0.2);
     text-shadow:0px 1px 1px rgba(0,0,0,0.3);
     color:#ffffff;
     border:0.1px solid #d4d4d4;
     background-repeat:repeat;
     background-size:auto;
     background-origin:padding-box;
     background-clip:padding-box;
     background: linear-gradient(to bottom, #d4d4d4 0%,#363636 100%);
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/admin/nav_bg_active2.png);
}
.active a {color:#fff; font-weight:bold; line-height:25px; padding:5px;}
.active a:hover {color: #fff; font-weight:bold; line-height:25px;}
.blankgray {background:#bbb; height:2px; width:100%; margin:0; padding:0; clear:both; font-size:2px;}

4、test-expand-left.html：请参考另一篇文章（https://blog.youkuaiyun.com/nzzl54/article/details/89240318），这里可以要自己写html嵌入了，不一定要这里写的，只要放在和index.html同级目录即可。