tab view 標簽切換對象的編寫

最新推荐文章于 2025-07-19 15:46:44 发布

froshloveC

最新推荐文章于 2025-07-19 15:46:44 发布

阅读量90

点赞数

分类专栏： javascript对象讨论

javascript对象讨论专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的Tab视图组件实现方法，包括如何通过JavaScript选择DOM元素、添加事件监听器以及切换Tab面板等核心功能。

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

var dotA = {
	trim:function(string){
		return string.replace(/^\s+|\s+$/g,'');
	},
	/* id className or Dom Elements */
	one:function(selector){
		selector = this.trim(selector);
		if(typeof selector == 'string')
			
			if(selector.indexOf('#') > -1){
				var aSel = selector.split("#");
				return document.getElementById(aSel[1]);
			}
			else if(selector.indexOf('.') > -1){
				var aSel = selector.split(".");
				var tagName = aSel[0];
				var className = aSel[1];
				var elements = document.getElementsByTagName(tagName || "*");
				if(elements)
					for(var i = 0 , len = elements.length ; i < len ;i++){
						if(elements[i].className.indexOf(className) > -1){
							return elements[i];
							break;
						}
					}
				else
					return null;
			}else{
				return document.getElementsByTagName(selector)[0];
			}
		else
			return selector;
	},
	/* add event to elements method */
	addEvent:function(el, type, fn, capture) {
			if (el && el.addEventListener) {
				el.addEventListener(type, fn, capture);
			} else if (el && el.attachEvent) {
				el.attachEvent("on" + type, fn);
			} 
	},
	/* 
		add a class to a elements 
		el:id or htmlElement
	*/
	addClass:function(el,className){
		el = (typeof el == 'string') ? this.one('#' + el) : el;
		if(!(el.className.indexOf(className) > -1)){
			el.className += " "+className;
			el.className = dotA.trim(el.className);
		}
	},
	removeClass:function(el,className){
		el = (typeof el == 'string') ? this.one('#' + el) : el;
		el.className = dotA.trim(el.className.replace(className,''));
	},
	hasClass:function(el,className){
		el = (typeof el == 'string') ? this.one('#' + el) : el;
		if((el.className.indexOf(className) > -1)){
			return true
		}else
			return false
	},
	stopEvent:function(e){
		if(e.target){
			e.preventDefault()
		}else{
			e.returnValue = false;
		}
	}
};

dotA.tabView = {
	tab_list_selected:null,
	tab_panel_selected:null,
	selected_index:0,

	toggleTab:function(e){
		e = e.srcElement || e.target;
		if(e.parentNode.tagName == 'LI'){
			
			var liTag = e.parentNode;
			if(!dotA.hasClass(liTag,'dota-tablist-selected')){
				dotA.removeClass(tab_list_selected,'dota-tablist-selected');
				dotA.addClass(liTag,'dota-tablist-selected');
				tab_list_selected = liTag;

				dotA.removeClass(tab_panel_selected,'dota-tab-selected');
				dotA.addClass(dotA.one(e.getAttribute('href')),'dota-tab-selected');
				tab_panel_selected = dotA.one(e.getAttribute('href'));
			}
		}
		return false;
	},

	/* el is a selector or a htmlElement*/
	render:function(el){
		el = (typeof el == 'string') ? dotA.one(el) : el;
		/* add class for elements */
		dotA.addClass(el,'dota-tabview');

		var ul = el.getElementsByTagName('ul')[0];

		dotA.addClass(ul,'dota-tabview-list');

		var div = el.getElementsByTagName('div')[0];

		dotA.addClass(div,'dota-tabview-panel');

		var tabpanels = div.children;
		for(var i = 0 ; i < tabpanels.length ; i++){
			dotA.addClass(tabpanels[i],'dota-tab-panel');
		};
		var ulist = ul.children;
		dotA.addClass(ulist[this.selected_index],'dota-tablist-selected');
		tab_list_selected = ulist[this.selected_index];
		dotA.addClass(tabpanels[this.selected_index],'dota-tab-selected');
		tab_panel_selected = tabpanels[this.selected_index];
		dotA.addEvent(ul,'click',dotA.tabView.toggleTab);

	},

	setCurrent:function(index){
		this.selected_index = index;
	}
};
dotA.tabView.setCurrent(1);
dotA.tabView.render('#tabview');

附件里面就是個示例