html选项卡简单实现

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<style>
/**
 * 自定义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;

}
</style>
<body>
    <div style="width:500px; height: 500px; margin:0 auto; border: 1px solid #ccc; padding: 30px; margin-top: 50px;">
        <p>说明：基本上本文件打开就能看到效果了。本文件除了tab标题增加了按钮的样式，其他的几乎没有样式，可以根据自身需求增加样式<br/><br/></p>
    
    
        <div class="">
            <label>tab头</label>
            <div>
                <ul class="diy-tab diy-tab">
                    <!-- 这里添加tab标题 -->
                    <li class="diy-btn diy-tab-title diy-active" data-id="1">
                        <span>热点新闻</span>
                        <i class="diy-tab-title-del">x</i>
                    </li>
                    <li class="diy-btn diy-tab-title" data-id="2">
                        <span>社会新闻</span>
                        <i class="diy-tab-title-del">x</i>
                    </li>
                </ul>
            </div>
        </div>
        <div class="">
            <label>tab内容</label>
            <div class=" diy-tab-content">
                <!-- 这里添加tab标题对应的内容 -->
                <div class="diy-tab-item diy-tab-item-1 diy-show">
                    <input type="text" name="content" placeholder="热点内容" autocomplete="off" value="">
                </div>
                <div class="diy-tab-item diy-tab-item-2">
                    <input type="text" name="content" placeholder="社会内容" autocomplete="off" value="">
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

<script>
/**
 * 自定义切换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')
    })
})
</script>

html选项卡简单实现

时光悠悠

引用和评论

浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

Vue.js-Vue实例

你可能不知道的图片加载相关知识

更强大、更灵活！ defineModel 重新定义双向绑定

Flex 布局学习总结（对齐方式）

使用CSS给标题添加书名号并超出省略

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！