非常不错的三种简洁的Tab导航（网页选项卡）简析

for(i=0;i<tli.length;i++){
  tli[i].className=i==n?"hover":""; /*更改选项卡的LI对象的样式，如果是选定的项则使用.hover样式*/
  mli[i].style.display=i==n?"block":"none"; /*确定主区域显示哪一个对象*/
}
}

第三种形式: 这也是一种不常用的方式，加一个相对层(.menu2box)，利用一个背景层(#tip2)定位，通过改变层的左距离(left)实现效果。

<div id="tabs2">
<div class="menu2box">
  <div id="tip2"></div>
  <ul id="menu2">
   <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
   <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
   <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
   <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
  </ul>
</div>
  <div class="main" id="main2">
新闻内容
</div>
</div>

<!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=gb2312" /> 
<title>简洁Tab</title> 
<style type="text/css"> 
 
								 <div class="pagination"><a title="Page"> <b>2</b>/<b>3</b> </a>  <a href="/cos/2019/0602/297811.shtml">首页</a> <a href="/cos/2019/0602/297811.shtml">上一页</a> <a href="/cos/2019/0602/297811.shtml">1</a> <b>2</b> <a href="/cos/2019/0602/297811_3.shtml">3</a> <a href="/cos/2019/0602/297811_3.shtml">下一页</a> <a href="/cos/2019/0602/297811_3.shtml">尾页</a></div>
			 </div>
			</div>
			   </div>
		<div class="postMore">
				<div class="tab" id="tab">
    <span class="active">相关文章</span>
    <span>大家在看</span>
</div>
<div class="tabdiv">
    <div class="tabpane">
			<ul class="articleBar">
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097329.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/3a/1097329.jpg" src="https://www.easck.com/d/file/ap/a4/3a/1097329.jpg"></div>
<div class="txtInfo"><h3>Node.js使用express写接口的具体代码</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097326.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/58/1097326.jpg" src="https://www.easck.com/d/file/ap/a4/58/1097326.jpg"></div>
<div class="txtInfo"><h3>TensorFlow.js实现AI换脸使用示例详解</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097270.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316070012997.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316070012997.jpg"></div>
<div class="txtInfo"><h3>Vue使用pdf-lib实现为文件流添加水印并预览</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097269.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/c9/1097269.jpg" src="https://www.easck.com/d/file/ap/a4/c9/1097269.jpg"></div>
<div class="txtInfo"><h3>JS中call apply bind函数手写实现demo</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097266.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316063007966.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316063007966.jpg"></div>
<div class="txtInfo"><h3>Vue使用pdf-lib实现为文件流添加水印并预览</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097265.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/40/1097265.jpg" src="https://www.easck.com/d/file/ap/a4/40/1097265.jpg"></div>
<div class="txtInfo"><h3>JS中call apply bind函数手写实现demo</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097264.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316063006963.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316063006963.jpg"></div>
<div class="txtInfo"><h3>MutationObserver监视对DOM 树所做更改的功能妙用</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097256.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/c1/1097256.jpg" src="https://www.easck.com/d/file/ap/a4/c1/1097256.jpg"></div>
<div class="txtInfo"><h3>JS中call apply bind函数手写实现demo</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097254.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316060019625.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316060019625.jpg"></div>
<div class="txtInfo"><h3>Vue使用pdf-lib实现为文件流添加水印并预览</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097253.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316060018616.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316060018616.jpg"></div>
<div class="txtInfo"><h3>MutationObserver监视对DOM 树所做更改的功能妙用</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
			</ul>
		</div>
	  </div>
    <div class="tabpane">
	<ul class="articleBar">
	<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097329.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/3a/1097329.jpg" src="https://www.easck.com/d/file/ap/a4/3a/1097329.jpg"></div>
<div class="txtInfo"><h3>Node.js使用express写接口的具体代码</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097326.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/58/1097326.jpg" src="https://www.easck.com/d/file/ap/a4/58/1097326.jpg"></div>
<div class="txtInfo"><h3>TensorFlow.js实现AI换脸使用示例详解</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097270.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316070012997.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316070012997.jpg"></div>
<div class="txtInfo"><h3>Vue使用pdf-lib实现为文件流添加水印并预览</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097269.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/c9/1097269.jpg" src="https://www.easck.com/d/file/ap/a4/c9/1097269.jpg"></div>
<div class="txtInfo"><h3>JS中call apply bind函数手写实现demo</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097266.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316063007966.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316063007966.jpg"></div>
<div class="txtInfo"><h3>Vue使用pdf-lib实现为文件流添加水印并预览</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097265.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/40/1097265.jpg" src="https://www.easck.com/d/file/ap/a4/40/1097265.jpg"></div>
<div class="txtInfo"><h3>JS中call apply bind函数手写实现demo</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097264.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316063006963.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316063006963.jpg"></div>
<div class="txtInfo"><h3>MutationObserver监视对DOM 树所做更改的功能妙用</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097256.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/a4/c1/1097256.jpg" src="https://www.easck.com/d/file/ap/a4/c1/1097256.jpg"></div>
<div class="txtInfo"><h3>JS中call apply bind函数手写实现demo</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097254.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316060019625.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316060019625.jpg"></div>
<div class="txtInfo"><h3>Vue使用pdf-lib实现为文件流添加水印并预览</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0316/1097253.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-16/20230316060018616.jpg" src="https://www.easck.com/d/file/p/2023/03-16/20230316060018616.jpg"></div>
<div class="txtInfo"><h3>MutationObserver监视对DOM 树所做更改的功能妙用</h3><div class="extr clearfix"><p><span class="time fl">2023-03-16</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
	</ul>
    </div>
</div>
        <footer>
<p><a href="https://www.easck.com">电脑版</a> - <a href="https://wap.easck.com">移动首页</a></p>
<div style="display:none"><script type="text/javascript" src="/skin/wap/tongji.js"></script></div>
        </footer> 
		<script type="application/ld+json">
{
	"@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld",
	"@id": "https://wap.easck.com/cos/2019/0602/297811.shtml",
	"title": "非常不错的三种简洁的Tab导航（网页选项卡）简析-易采站长站",
	"description": "在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍几种简洁的选项卡效果的实现（不涉及滑动门和AJAX），附有实例，无",
	"pubDate": "2019-06-02 T 11:35:23+08:00",
	"upDate": "2019-06-02 T 11:35:23+08:00",
        "data":{
            "WebPage":{
                 "pcUrl":"https://www.easck.com/cos/2019/0602/297811.shtml",
                 "wapUrl":"https://www.easck.com/cos/2019/0602/297811.shtml",
                 "fromSrc":"易采站长站"
             }
        }
}
</script>
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
	</body>
</html>