function inittab(option){
	var defaultoption = {
		paddingtop: "10px",
		paddingbottom: "10px",
		fontsize: "15px",
		selecttab: {//閫変腑鏍峰紡锛坒ull濉弧 underline涓嬪垝绾匡級
			type: "full"
		},
		tab:{
			list:[//閫夐」闆嗗悎
				{content: '榛樿閫夐」1',},
				{content: '榛樿閫夐」2'},
				{content: '榛樿閫夐」3'},
				{content: '榛樿閫夐」4'},
				{content: '榛樿閫夐」5'}
			],
			selectindex: 0//閫変腑閫夐」绱㈠紩
		},
		arealist:[//閫夐」瀵瑰簲璺宠浆鍖哄煙闆嗗悎
			{selector: '#s1'},
			{selector: '#s2'},
			{selector: '#s3'},
			{selector: '#s4'},
			{selector: '#s5'}
		],
		skiptime: 300  //璺宠浆鎵€闇€鏃堕棿
	}
	option = $.extend(defaultoption,option);
	let areadoms = getareadoms(option.arealist)
	let navdom = document.queryselector("#hi-tab")
	let navdomoffsettop = navdom.offsettop
	rendertab();
	setdomstyle()
	window.addeventlistener('scroll',setdomstyle)
	
	function setdomstyle(){
		if(navdomoffsettop < (window.scrolly||window.pageyoffset)){
			if(document.body.currentstyle == undefined){
				document.body.style.paddingtop = navdom.offsetheight + "px"
				navdom.style.position = "fixed"
				navdom.style.top = "80px"
				navdom.style.left = "0px"
			}else{
				document.body.style.setattribute("padding-top",navdom.offsetheight + "px")
				navdom.style.setattribute("position","fixed")
				navdom.style.setattribute("top","0px")
				navdom.style.setattribute("left","0px")
			}
		}else{
			if(document.body.currentstyle == undefined){
				document.body.style.paddingtop = "0px"
				navdom.style.position = "relative"
				navdom.style.top = "0px"
				navdom.style.left = "0px"
			}else{
				document.body.style.setattribute("padding-top","0px")
				navdom.style.setattribute("position","relative")
				navdom.style.setattribute("top","0px")
				navdom.style.setattribute("left","0px")
			}
		}
		areadoms.foreach(function(value){
			if(value.getboundingclientrect().top <= navdom.offsetheight){
				var area = document.queryselector(".hi-select-btn.hi-selected-" + option.selecttab.type)
				var s = document.queryselector("a[href='#" + value.id + "']")
				if(!area) return false
				area.classlist.remove("hi-selected-" + option.selecttab.type)
				s.classlist.add("hi-selected-" + option.selecttab.type)
			}
		})
	}
	
	//鑾峰彇鑿滃崟瀵瑰簲鍖哄煙dom
	function getareadoms(arealist){
		let list = []
		arealist.foreach(function(value){
			list.push(document.queryselector(value.selector))
		})
		return list
	}
	
	function rendertab(){
		let uldom = document.createelement("ul")
		
		option.tab.list.foreach(function(value,index){
			let adom = document.createelement("a")
			adom.setattribute("href",option.arealist[index].selector)
			if(document.body.currentstyle == undefined){
				adom.style.paddingtop = option.paddingtop
				adom.style.paddingbottom = option.paddingbottom
				adom.style.fontsize = option.fontsize
			}else{
				adom.style.setattribute("padding-top",option.paddingtop)
				adom.style.setattribute("padding-bottom",option.paddingbottom)
				adom.style.setattribute("font-size",option.fontsize)
			}
			adom.classlist.add("hi-select-btn")
			if(index == option.tab.selectindex){
				adom.classlist.add("hi-selected-" + option.selecttab.type)
			}
			adom.innerhtml = value.content
			let lidom = document.createelement("li")
			lidom.appendchild(adom)
			uldom.appendchild(lidom)
		})
		navdom.appendchild(uldom)
	}
			
	$(".hi-select-btn").bind("click touch",function(){
		//鏍规嵁a鏍囩鐨刪ref杞崲涓篿d閫夋嫨鍣紝鑾峰彇id鍏冪礌鎵€澶勭殑浣嶇疆
		$('html,body').animate({scrolltop: ($($(this).attr('href')).offset().top - navdom.offsetheight)},option.skiptime)
		return false
	});
}