Tab选项卡

基本用法：McrbHttpClient.tabfn.init(options, callback, index);

参数说明：

用法实例：

// html：
<div id="mytab" class="components_tab">
    <ul class="tabbtns">
        <li data-value='{"sys_name":"UDSO","id":"1"}' class="on">介绍</li>
        <li data-value='{"sys_name":"cms","id":"2"}'>项目</li>
        <li data-value='{"sys_name":"audit","id":"3"}'>合作</li>
        <li data-value='{"sys_name":"center","id":"4"}'>地址</li>
    </ul>
    <div class="tabboxs">
        <div class="box on">
            <p>一家以技术研发为主的新型互联网，软件创新服务企业，其利用公司持续积累的核心技术和技术创新思维</p>
        </div>
        <div class="box">
            <p>提供以互联网、移动互联网、大数据、云计算、人工智能为核心的软件技术服务提供整套解决方案</p>
        </div>
        <div class="box">
            <p>坚持自主创新，从事软件开发、软件著作、专利与技术创新几十项</p>
        </div>
        <div class="box">
            <p> 发展：艰苦奋斗、技术创新、挖掘人的潜力促进公司发展，挖掘公司潜力促进软件行业发展</p>
        </div>
    </div>
</div>                    
// js
McrbHttpClient.tabfn.init({
    eleid:'mytab',
    trigger:'click',
    btncolor:'#0078FF',
}, function(e, val){
    console.log('输出点击的元素:'); 
    console.log(e);
    console.log('输出点击元素的data-value属性值:');
    console.log(JSON.parse(val));
}, 2);

效果展示：

动态追加tab项方法：McrbHttpClient.tabfunc.init(options, callback, index);

参数说明：

用法实例：

//html：
<div id="mytab2" class="components_tab">
    <ul class="tabbtns">
        <li class="on">大橘</li>
        <li>汪汪</li>
        <li>库库</li>
        <li>斑点</li>
    </ul>
    <div class="tabboxs">
        <div class="box on">111</div>
        <div class="box">222</div>
        <div class="box">333</div>
        <div class="box">444</div>
    </div>
</div>                        
// js
var n = 0;
var content = document.createElement('div');
content.innerHTML = '<p>软件创新服务企业，其利用公司持续积累的核心技术和技术创新思维</p>';
McrbHttpClient.tabfunc.init({
    eleid:'mytab2',
    btncolor:'#0078FF',
    addfun:{
        title:'新增'+n,
        content:content,
        callback:function(e){ // 新增tab后回调
            console.log('addfun回调')
            n++;
            e.addfun.title = '新增'+n;
            content.innerHTML = '<p>'+n+'软件创新服务企业，其利用公司持续积累的核心技术和技术创新思维</p>'
            console.log(e);
        }
    }
}, function(e, val){ // tab切换时回调
    console.log('输出点击的元素:'); 
    console.log(e);
    console.log('输出点击元素的data-value属性值:');
    console.log(JSON.parse(val));
}, 1);

效果展示：