切换组件

最新推荐文章于 2022-01-06 17:18:27 发布

碵蝎

最新推荐文章于 2022-01-06 17:18:27 发布

阅读量1.1k

点赞数 1

分类专栏：旧技术

本文链接：https://blog.csdn.net/QQ408896436/article/details/51351772

版权

旧技术专栏收录该内容

28 篇文章 0 订阅

订阅专栏

源码：

var lcf_tab = function()  
{     
    //保存用户输入的配置  
    this.config = null;  
  
    //上一个按钮  
    this.oldBnt = null;  
  
    //初始化  
    this.init = function(obj)  
    {  
        this.config = {};  
         for(var i in obj)   
         {       
            this.config[i] = obj[i];    
         }   
  
         this.bind();  
    }  
  
    //添加事件  
    this.bind = function()  
    {  
        var self = this;  
  
        //获取按钮列表  
        var bntArr = document.getElementById(this.config.parent).getElementsByTagName(this.config.action);  
  
        //给按钮加上号码  
        for(var i=0; i<bntArr.length; i++)  
        {  
            bntArr[i].setAttribute('lcf_number', (i+1));  
        }  
  
        //记录上一个按钮  
        this.oldBnt = bntArr[0];  
  
        //添加事件  
        for(var i=0; i<bntArr.length; i++)  
        {  
            var bnt = bntArr[i];  
  
            if (this.config.event == 'touchend' || this.config.event == 'touchstart')   
            {  
                bnt.addEventListener( this.config.event, function(){  
  
                    self.dealEvebt(self, this);  
  
                }, false );  
            }  
            else  
            {  
                bnt[this.config.event] = function()  
                {     
                    self.dealEvebt(self, this);  
                }  
            }  
        }  
    },  
  
    //处理事件  
    this.dealEvebt = function(self, tag)  
    {  
        //处理点中的按钮  
        var idx = self.getIdx(tag);  
        var msgArr = self.config['bnt'+idx].split(',');  
        self.removeClass(tag, msgArr[1]); 
        self.addClass(tag, msgArr[0]); 
        if (msgArr[2] != 'null') 
        {
            self.getById(msgArr[2]).style.display = 'block'; 
        } 
  
        //处理上一个按钮  
        var oldIdx = self.getIdx(self.oldBnt);  
  
        //点击的是同一个按钮则return  
        if (idx == oldIdx) {return;}  
  
        var oldMsgArr = self.config['bnt'+oldIdx].split(',');  
        self.removeClass(self.oldBnt, oldMsgArr[0]);  
        self.addClass(self.oldBnt, oldMsgArr[1]);  


        if (oldMsgArr[2] != 'null') 
        {
            self.getById(oldMsgArr[2]).style.display = 'none';  
        }


        self.oldBnt = tag;  
    },  
  
    //添加类名  
    this.addClass = function(obj, className)  
    {  
        var p = new RegExp(className);  
  
        //已经加过这个类名的则return  
        if ( p.test(obj.className) ) {return;}  
  
        obj.className = obj.className + ' ' + className;  
    },  
  
    //移除类名  
    this.removeClass = function(obj, className)  
    {  
        var length = className.length; 


        //要匹配的正则  
        var p = new RegExp(className);  
  
        //  
        var objClassName = obj.className;  
  
        //匹配到的话代表有这个字符  
        if (p.test(objClassName) )   
        {  
            //截取匹配到的字符  
            var str = className.substr( className.search(p), length+1 );  
  
            var px2 = new RegExp(str);  


            obj.className = obj.className.replace(px2,'');  
        }


        //判断类名最后是否有一个空格存在
        var lastP = /\s$/;
        if( lastP.test(obj.className) )
        {
            obj.className = obj.className.substr(0, obj.className.length - 1);
        }   
    },  
  
    //获取点中的按钮的位置是第几个  
    this.getIdx = function(obj)  
    {  
        return obj.getAttribute('lcf_number')  
    },  
  
    //id找节点  
    this.getById = function(id)      
    {      
        return document.getElementById(id);  
    }    
  
};

使用方法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gbk">
<meta name="robots" content="all">
<meta name="author" content="Tencent-CP">
<meta name="Copyright" content="Tencent">
<title>切换例子</title>	
<style type="text/css">
	body{margin:0px; padding:0px; font-size:60px; font-family: '微软雅黑';}
	ul,ol,h1,h2,h3,h4,h5,h6,dl,dd,p,form{margin:0px; padding:0px;}
	ul,ol{list-style-type:none;}
	h1{display:none;}
	#nav, #nav2{overflow: hidden;}
	#nav li, #nav2 li{width: 333px; height: 77px; float: left; display: inline; text-align: center;}
	#nav li a, #nav2 li a{text-indent: -9999px; overflow: hidden; display: block; width: 100%; height: 100%;}
	#nav .select1, #nav2 .select1{ background: url('images/1.jpg') no-repeat 0 0; }
	#nav .select2 , #nav2 .select2{ background: url('images/2.jpg') no-repeat 0 0; }
	#nav .select3 , #nav2 .select3{ background: url('images/3.jpg') no-repeat 0 0; }
	#nav .noselect1, #nav2 .noselect1{ background: url('images/4.jpg') no-repeat 0 0; }
	#nav .noselect2, #nav2 .noselect2{ background: url('images/5.jpg') no-repeat 0 0; }
	#nav .noselect3, #nav2 .noselect3{ background: url('images/6.jpg') no-repeat 0 0; }
	.box{width: 1000px; height: 500px; background: red;}
	.section{margin-top: 50px;}

</style>
</head>
<body>
	<div class='header'>
		<ul id='nav'>
			<li class='select1'><a href="javascript:void(0)" title='审判记录'>审判记录</a></li>
			<li class='noselect2'><a href="javascript:void(0)" title='视频审判'>视频审判</a></li>
			<li class='noselect3'><a href="javascript:void(0)" title='积分兑换'>积分兑换</a></li>
		</ul>
		<div id='box1' class='box' style='display:block'>内容1</div>
		<div id='box2' class='box' style='display:none'>内容2</div>
		<div id='box3' class='box' style='display:none'>内容3</div>
	</div>

	<div class='section'>
		<ul id='nav2'>
			<li class='select1'><a href="javascript:void(0)" title='审判记录'>审判记录</a></li>
			<li class='noselect2'><a href="javascript:void(0)" title='视频审判'>视频审判</a></li>
			<li class='noselect3'><a href="javascript:void(0)" title='积分兑换'>积分兑换</a></li>
		</ul>
		<div id='box4' class='box' style='display:block'>内容1</div>
		<div id='box5' class='box' style='display:none'>内容2</div>
		<div id='box6' class='box' style='display:none'>内容3</div>
	</div>
</body>
</html>
<script src='js/lcf_tab.js'></script>
<script type="text/javascript">
	
	new lcf_tab().init({
		'parent' : 'nav',      //按钮的父节点
		'action' : 'li',       //按钮
		'bnt1' : 'select1,noselect1,box1',   //按钮选中的类名，按钮没选中的类名，按钮点击后显示的div，该div必须有一个唯一的id
		'bnt2' : 'select2,noselect2,box2',
		'bnt3' : 'select3,noselect3,box3',
		'event' : 'onclick'     //事件
	});

	new lcf_tab().init({
		'parent' : 'nav2',
		'action' : 'li', 
		'bnt1' : 'select1,noselect1,box4',
		'bnt2' : 'select2,noselect2,box5',
		'bnt3' : 'select3,noselect3,box6',
		'event' : 'onmouseover'
	});

</script>

具体代码：http://download.csdn.net/detail/qq408896436/9516332

碵蝎

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
切换组件

源码：var lcf_tab = function() { //保存用户输入的配置 this.config = null; //上一个按钮 this.oldBnt = null; //初始化 this.init = function(obj) { this.c...
复制链接

扫一扫

专栏目录