tab选项卡--（面向对象）

最新推荐文章于 2023-01-12 20:37:12 发布

黑色咖啡 Ken

最新推荐文章于 2023-01-12 20:37:12 发布

阅读量268

点赞数

分类专栏： javascript ECMAScript 6

本文链接：https://blog.csdn.net/a4561614/article/details/91536466

版权

javascript 同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

ECMAScript 6

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
  <title>面向对象Tab选项卡</title> 
  <style>
     body,html,ul,li{padding:0px;margin: 0px;}
     #tab_header ul{display: flex;width: 100%;}
     #tab_header ul  li{
		 flex: 1;
		 font-style: normal;
		 list-style-type: none;
		 justify-content: center;
		 text-align: center;
		 align-items: center;
	 }
	 ul li.active{color:red}
	 #tab_content{padding:10px;}
    </style> 
 </head> 
 <body> 
  <div id="tab_header"> 
   <ul> 
    <li id="0" class="active">公告</li> 
    <li id="1">新闻</li> 
    <li id="2">论坛</li> 
    <li id="3">公堂</li> 
   </ul> 
  </div> 
  <div id="tab_content"> 
   <div class="dom" style="display: block;">
    这是公告
   </div> 
   <div class="dom" style="display: none;">
    这是新闻
   </div> 
   <div class="dom" style="display: none;">
    这是论坛
   </div> 
   <div class="dom" style="display: none;">
    这是公堂
   </div> 
  </div>  
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 
  <script type="text/javascript">
		window.onload = function() {
			var tab = new TabsFn(); //页面加载完成后执行构造函数
			tab._inint(); //调用方法
		}

		function TabsFn() {
			this.lis = document.getElementsByTagName("li"); //找到页面所有的li
			this.contents = document.getElementsByClassName("dom"); //找到页面所有的dom
		}

		TabsFn.prototype = { //使用prototype原型链向对象添加属性和方法
			_inint: function() {
				this.setId(); //设置索引方法
				this.bindEvent(); //鼠标经过方法
			},
			//设置索引id
			setId: function() {
				for (var i = 0; i < this.lis.length; i++) {
					this.lis[i].id = i;
				}
			},
			//绑定事件
			bindEvent: function() {
				var self = this; //备份this
				for (var i = 0; i < this.lis.length; i++) { //遍历li中的个数
					this.lis[i].onmouseover = function(e) { //事件
						for (var j = 0; j < self.lis.length; j++) { //重置所有的li的active为空和隐藏所有的要显示的文本
							self.lis[j].className = '';
							self.contents[j].style.display = 'none';
						}
						this.className = 'active'; //启用当前的active
						self.contents[this.id].style.display = 'block' //启用当前的文本内容显示
					}
				}
			}
		}
	</script>  
 </body>
</html>

运行结果：

黑色咖啡 Ken

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
tab选项卡--（面向对象）

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="...
复制链接

扫一扫