table切换选择

素颜马尾好姑娘i 2023-07-11 15:17 7阅读 0赞

<div class="tab">  
             <div>  
                <ul class="tab-hd">  
                    <li class="active">统一电价</li>  
                    <li>分时计费</li>  
                    <li>阶梯计费</li>  
                </ul>  
                <span class="addBtn" data-toggle="modal">添加</span>  
            </div>  
            <ul class="tab-bd">  
                <li class="thisclass">  
                      
                    <div class="main">  
                        <table class="table table-bordered table-stripe unifiedTable"></table>  
                    </div>  
                </li>  
                <li>  
                      
                    <div class="main">  
                        <table class="table table-bordered table-stripe timeDivisionTable"></table>  
                    </div>  
                </li>  
                <li>  
                      
                    <div class="main">  
                        <table class="table table-bordered table-stripe stageTable"></table>  
                    </div>  
                </li>  
            </ul>  
        </div>

js:

$(function() \{  
     //切换table内容  
     tabs(".tab-hd","active",".tab-bd");  
     \})

// 声明函数，参数三个：导航标题、当前选择项、当前标题显示内容  
function tabs(tabTit,on,tabCon)\{  
    // 找到所有标题并添加单机事件  
    $(tabTit).children().click(function()\{  
        // 声明当前选择项  
        var index = $(tabTit).children().index(this);  
        // 为当前选中项增加active，移除其兄弟元素的active  
        $(this).addClass(on).siblings().removeClass(on);  
        // 选中项显示内容，未选中项隐藏内容  
        $(tabCon).children().eq(index).show().siblings().hide();  
    \});  
\};

css:

.tab\{  
       margin-top: 10px;  
   \}  
.tab-hd \{  
    overflow:hidden;   
    zoom:1.1;  
    width:42%;  
    display: inline;  
\}  
.tab-hd>li\{   
    float:left;   
    width: 13%;  
    color:\#0670E8;  
    text-align:center;  
    cursor:pointer;  
    padding:5px;  
    font-size:14px;  
    list-style: none;  
 \}  
.tab .addBtn \{  
     display: inline-block;  
    margin-left: 10%;  
\}

![20200306133810671.png][]

[20200306133810671.png]: https://img-blog.csdnimg.cn/20200306133810671.png

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关按周切换的时间选择器

今天遇到一个要按周切换的时间选择器,简单的做一下记录 onShow: function () { let curD = new Date();

深碍√TFBOYSˉ_/ 2023年07月18日 09:29/ 0 赞/ 2 阅读

相关 table切换选择

<div class="tab"> <div> <ul class="tab-hd">

素颜马尾好姑娘i/ 2023年07月11日 15:17/ 0 赞/ 8 阅读

相关 element ui切换table组件式

效果如下： ![20200717162448865.png][] 我用下面这个代码是因为，我这边的tab切换是每个不同的页面的哦，感觉这样写方便点 <e

╰+攻爆jí腚メ/ 2023年02月27日 12:21/ 0 赞/ 44 阅读

相关 jeecgboot 页面实现table切换展示的步骤

文章目录 1：实现的效果 2：菜单配置方式 3：页面实现方式 1：实现的效果 ![在这里插入图片描述][watermark_type_ZmFuZ

你的名字/ 2022年12月28日 07:29/ 0 赞/ 530 阅读

相关 el-table实现选择列显示

想法：可以通过一个checkbox控制一列的显示与隐藏选择列按钮 <el-dropdown trigger="click" style="margin-left:

我不是女神ヾ/ 2022年11月16日 13:40/ 0 赞/ 229 阅读

相关 jQuery左右选择切换

[下载地址][Link 1]jQuery左右选择切换代码是两个选择框的值进行选择切换的效果，可以多选和单选或者全部选择切换到另一边。 ![1631201582.png][]

骑猪看日落/ 2022年09月11日 00:28/ 0 赞/ 163 阅读

相关 jQuery table selector jquey 表格选择器

jQuery("\recommandVideoTitle").html(jQuery("\video table tr:nth-child(3)").children("td:

系统管理员/ 2022年07月12日 13:45/ 0 赞/ 154 阅读

相关 js切换选择项默认选中10

//------------------切换选择项--------------------- /\ var lab

深藏阁楼爱情的钟/ 2022年06月02日 06:12/ 0 赞/ 206 阅读

相关 MAC python版本选择实现版本切换

写在前面：最近在学习Python基础，教学视频里的Python环境是python3。Mac自带的python版本是2.7，于是我需要切换python版本到3.0。看了许多

红太狼/ 2022年01月07日 02:23/ 0 赞/ 824 阅读

相关 vue-demo1-table栏切换

针对的知识点: vue的基本使用，模板语法 1. vue指令 2. vue事件绑定 3. vue属性绑定 4. vue循环原始案例选项卡html结构 <

ゝ一世哀愁。/ 2021年08月13日 20:05/ 0 赞/ 334 阅读