网站首页>技术心得 >js设置单选按钮选中(js简单选项卡代码与效果图)

js设置单选按钮选中(js简单选项卡代码与效果图)

来源:白马号 · 发布时间:2022-11-21 05:18:05 · 所属栏目:技术心得

js设置单选按钮选中写法

HTML:



tab1
tab2
tab3
tab4
tab5 页面1 页面2 页面3 页面4 页面5

css:

.wrap{height:500px;width:80%;margin:50px
 auto;box-shadow:5px 
#ccc;}.fl{float:left;}.clearfix:after{content:'';display:table;clear:both;}.tab
 .t-item{float:left;width:20%;text-align:center;border:1px solid 
#ccc;box-sizing:border-box;padding:10px 0;cursor:pointer;}.tab 
.t-item.cur{color:red;background:#efefef;}.page{position:relative;height:450px;}.page
 
.p-item{display:none;line-height:100px;height:100px;text-align:center;position:absolute;top:0px;left:0;height:100%;width:100%;}.page
 .p-item.cur{display:block;}

效果图预览:



js简单选项卡代码

js:

;(() => {
 var Tab = function () {
 this.tab = document.getElementsByClassName('tab')[0]
 this.tabs = document.getElementsByClassName('t-item')
 this.pages = document.getElementsByClassName('p-item')
 }
 Tab.prototype = {
 init: function () {
 this.bindEvent()
 },
 bindEvent: function () {
 this.tab.addEventListener('click', this.tabClick.bind(this), false)
 },
 tabClick: function (e) {
 var e = e || window.event,
 tar = e.target || e.src.Element,
 className = tar.className,
 oTabs = this.tabs,
 oPages = this.pages,
 len = oTabs.length,
 thisIndex = Array.prototype.indexOf.bind(oTabs, tar)(),
 tItem, pItem
 if (className === 't-item') {
 for (var i = 0; i < len; i++) {
 tItem = oTabs[i]
 pItem = oPages[i]
 tItem.className = 't-item'
 pItem.className = 'p-item'
 }
 oTabs[thisIndex].className += ' cur'
 oPages[thisIndex].className += ' cur'
 }
 }
 }
 return new Tab().init()
})()

文章推荐: