html选项卡原理,html选项卡简单实现

复制下面内容到html文件中，在浏览器打开即可

Title

/**

* 自定义tab样式

*/

.diy-tab li {

margin-bottom: 10px;

height: 35px!important;

line-height: 35px!important;

}

.diy-tab-item {

display: none;

}

.diy-show {

display: block;

}

.diy-active {

border: 1px solid #5bc88b!important;

}

.diy-tab-title {

z-index: 100;

position: relative;

}

.diy-tab-title {

cursor: context-menu;

}

.diy-btn {

border: 1px solid #C9C9C9;

background-color: #fff;

color: #555;

height: 41px;

line-height: 41px;

display: inline-block;

padding: 0 20px 0 10px;

}

.diy-tab-title-del {

font-size: 12px!important;

display: inline-block;

right: 5px;

top: 12px;

width: 12px;

height: 13px;

line-height: 15px;

color: #c2c2c2;

position: absolute;

overflow: hidden;

}

.diy-tab-title-del:hover {

background: #b94a48;

color: #fff;

}

说明：基本上本文件打开就能看到效果了。本文件除了tab标题增加了按钮的样式，其他的几乎没有样式，可以根据自身需求增加样式

tab头

• 热点新闻

  x

• 社会新闻

  x

tab内容

/**

* 自定义切换tab

*/

$(function () {

// 点击删除title

var was_del = false

$('.diy-tab-title-del').click(function () {

// 删除title

$('.diy-tab-item-' + $(this).parent().data('id')).remove()

// 删除content

$(this).parent().remove()

// 显示title

var have_show_title = false

$('.diy-tab .diy-tab-title').each(function () {

if ($(this).hasClass('diy-active')) {

have_show_title = true

}

})

if (!have_show_title) {

$('.diy-tab .diy-tab-title').eq(0).addClass('diy-active')

}

// 显示出一个content

var have_show_item = false

$('.diy-tab-content .diy-tab-item').each(function () {

if ($(this).hasClass('diy-show')) {

have_show_item = true

}

})

if (!have_show_item) {

$('.diy-tab-content .diy-tab-item').eq(0).addClass('diy-show')

}

})

// 点击title

$('.diy-tab .diy-tab-title').click(function (obj) {

// 防止点击删除命中了title按钮，这里需要做一下校验

if (was_del) {

return true

}

// content选中显示样式

$('.diy-tab .diy-tab-title').removeClass('diy-active')

$(this).addClass('diy-active')

var diy_class = '.diy-tab-item-' + $(this).data('id')

$('.diy-tab-content .diy-tab-item').removeClass('diy-show')

$(diy_class).addClass('diy-show')

})

})