【jquery】table切换页面

最新推荐文章于 2023-05-16 17:16:08 发布
最新推荐文章于 2023-05-16 17:16:08 发布
阅读量1.2k 收藏 8
点赞数
文章标签： JS JQuery CSS+DIV实例 javascript css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/null_NaN/article/details/107078417
版权

一、table切换
效果：table导航选项对应的内容显示与隐藏；
思想：主要利用选项的index值去寻找对应的内容模块，显示该模块，其余的模块都隐藏，最后选中的选项设置一些特殊的样式以表明显。

订单列表 
       *{
    margin: 0;
    padding: 0;
}
html body {
    width: 100%;
    height: 100%;
    /* font-size: 16px; */
}
#news {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    /* font-size: 50px; */
    padding-bottom: 30px;
}
#list {
    height:25px;
    margin-top: 10px;
}
#list ul {
    height:25px;
    list-style-type:none;
}
#list ul li {
    float: left;
    cursor: pointer;
    text-align: center;
    border-radius: 10px;
    background-color: #C0DCC0;
    margin-left: 5px;
    padding: 5px 8px;
}
.cont {
    margin-top:10px;
    padding:10px;
    display:none;
}

.current {
    background: #467704;
    color: #fff;
}
.sendOrders{
    height: 30px;
    background-color: #f1f1f1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flexBox{
    display: flex;
    padding: 6px;
}
.widthStyle{
    width: 70%;
}
button{
    border: 0px;
    background-color: #2299EE;
    font-size: 16px;
    color: #fff;
    padding: 5px 20px;
    border-radius: 30px;
}
.btnStyle{
    text-align: center;
    margin-top: 15px;
}
.orderList{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #ccc;
}
.orderNumber{
    border-radius: 50%;
    display: flex;
    justify-content: center;
    /* font-size: 50px; */
    align-items: center;
    font-weight: 700;
}
a{
    text-decoration: none;
    color: #fff;
}

.cont ul{
    border: 1px dashed #ccc;
    padding: 10px;
    margin-bottom: 15px;
    list-style-type:none;
    padding-bottom: 30px;
}
.juzhong{
    text-align: center;
  margin: 5px 10px 0px 0px;
  font-size: 18px;
}

</style>

<body>
    <div id="news">
        <div class="sendOrders">
            我的维修
        </div>
        <div id="list">
            <ul>
                <li style="background-color: #467704" class="current">全部派单</li>
                <li>预约中</li>
                <li>未完成</li>
                <li>已完成</li>
                <li>废单</li>
            </ul>
        </div>
        <!-- 新任务 -->
        <div class="cont" style="display:block;">
            <ul>
                <li>
                    <div class="orderList" style="background-color: yellow">
                        <div class="flexBox">
                            <div class="orderNumber">1</div>
                            <img height="20px" src="money.jpg" alt="">
                        </div>
                        <div class="juzhong">
                            新任务
                        </div>
                    </div>
                    <div class="flexBox">
                        <div>地区：</div>
                        <div class="widthStyle">贵阳 南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>派单详细：</div>
                        <div class="widthStyle">油烟机怎么的怎么的贵阳</div>
                    </div>
                    <div class="flexBox">
                        <div>报修时间：</div>
                        <div class="widthStyle">2020/6/36 10:56:23</div>
                    </div>
                    <div class="btnStyle">
                        <button>退单</button>
                        <button style="margin: 0 15px;">
                            <a href="./orderDetails.html?keyword=1">接单</a>
                        </button>
                        <button>聊天</button>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="orderList" style="background-color: red">
                        <div class="flexBox">
                            <div class="orderNumber">2</div>
                        </div>
                        <div class="juzhong">
                            预约中
                        </div>
                    </div>
                    <div class="flexBox">
                        <div>地区：</div>
                        <div class="widthStyle">贵阳 南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>派单详细：</div>
                        <div class="widthStyle">油烟机怎么的</div>
                    </div>
                    <div class="flexBox">
                        <div>报修时间：</div>
                        <div class="widthStyle">2020/6/36 10:56:23</div>
                    </div>
                    <div class="btnStyle">
                        <button>已完成</button>
                        <button style="margin: 0 15px">
                            <a href="./orderDetails.html?keyword=2">详情</a>
                        </button>
                        <button>聊天</button>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="orderList" style="background-color: #467704c2;">
                        <div class="flexBox">
                            <div class="orderNumber">3</div>
                        </div>
                        <div class="juzhong">
                            已完成
                        </div>
                    </div>
                    <div class="flexBox">
                        <div>地区：</div>
                        <div class="widthStyle">贵阳 南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>派单详细：</div>
                        <div class="widthStyle">油烟机怎么的怎么的贵阳</div>
                    </div>
                    <div class="flexBox">
                        <div>报修时间：</div>
                        <div class="widthStyle">2020/6/36 10:56:23</div>
                    </div>
                    <div class="btnStyle">
                        <button style="margin: 0 15px;">
                            <a href="./orderDetails.html?keyword=3">详情</a>
                        </button>
                        <button>聊天</button>

                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="orderList" style="background-color: #666;">
                        <div class="flexBox">
                            <div class="orderNumber">5</div>
                        </div>
                        <div class="juzhong">
                            废单
                        </div>
                    </div>
                    <div class="flexBox">
                        <div>地区：</div>
                        <div class="widthStyle">贵阳 南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>派单详细：</div>
                        <div class="widthStyle">油烟机怎么的怎</div>
                    </div>
                    <div class="flexBox">
                        <div>报修时间：</div>
                        <div class="widthStyle">2020/6/36 10:56:23</div>
                    </div>
                    <div class="btnStyle">
                        <button style="margin: 0 15px;">
                            <a href="./orderDetails.html?keyword=5">详情</a>
                        </button>
                        <button>聊天</button>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 维修中 -->
        <div class="cont">
            <ul>
                <li>
                    <div class="orderList">
                        <div class="flexBox">
                            <div class="orderNumber">1</div>
                        </div>

                    </div>
                    <div class="flexBox">
                        <div>地区：</div>
                        <div class="widthStyle">贵阳 南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>派单详细：</div>
                        <div class="widthStyle">油烟机怎么的怎么的贵阳 南明区南明区南明区南明区南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>报修时间：</div>
                        <div class="widthStyle">2020/6/36 10:56:23</div>
                    </div>
                    <div class="btnStyle">
                        <button>已完成</button>
                        <button>未完成</button>
                        <button>废单</button>
                        <button>聊天</button>

                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="orderList">
                        <div class="flexBox">
                            <div class="orderNumber">2</div>
                        </div>
                    </div>
                    <div class="flexBox">
                        <div>地区：</div>
                        <div class="widthStyle">贵阳 南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>派单详细：</div>
                        <div class="widthStyle">油烟机怎么的怎么的贵阳 南明区南明区南明区南明区南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>报修时间：</div>
                        <div class="widthStyle">2020/6/36 10:56:23</div>
                    </div>
                    <div class="btnStyle">
                            <button>已完成</button>
                            <button>未完成</button>
                            <button>废单</button>
                            <button>聊天</button>
                    </div>
                </li>
            </ul>
        </div>
             <!-- 未完成 -->
             <div class="cont">
                    <ul>
                        <li>
                            <div class="orderList">
                                <div class="flexBox">
                                    <div class="orderNumber">1</div>
                                </div>
                            </div>
                            <div class="flexBox">
                                <div>地区：</div>
                                <div class="widthStyle">贵阳 南明区</div>
                            </div>
                            <div class="flexBox">
                                <div>派单详细：</div>
                                <div class="widthStyle">油烟机怎么的怎么的贵阳 南明区南明区南明区南明区南明区</div>
                            </div>
                            <div class="flexBox">
                                <div>报修时间：</div>
                                <div class="widthStyle">2020/6/36 10:56:23</div>
                            </div>
                            <div class="btnStyle">
                                    <button>备注</button>
                                    <button>废单</button>
                                    <button>
                                        <a href="./orderDetails.html?keyword=3">详情</a>
                                    </button>
                                    <button>聊天</button>
        
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <div class="orderList">
                                <div class="flexBox">
                                    <div class="orderNumber">2</div>
                                </div>
                            </div>
                            <div class="flexBox">
                                <div>地区：</div>
                                <div class="widthStyle">贵阳 南明区</div>
                            </div>
                            <div class="flexBox">
                                <div>派单详细：</div>
                                <div class="widthStyle">油烟机怎么的怎么的贵阳 南明区南明区南明区南明区南明区</div>
                            </div>
                            <div class="flexBox">
                                <div>报修时间：</div>
                                <div class="widthStyle">2020/6/36 10:56:23</div>
                            </div>
                            <div class="btnStyle">
                                    <button>备注</button>
                                    <button>废单</button>
                                    <button>
                                        <a href="./orderDetails.html?keyword=3">详情</a>
                                    </button>
                                    <button>聊天</button>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <div class="orderList">
                                <div class="flexBox">
                                    <div class="orderNumber">3</div>
                                </div>
                            </div>
                            <div class="flexBox">
                                <div>地区：</div>
                                <div class="widthStyle">贵阳 南明区</div>
                            </div>
                            <div class="flexBox">
                                <div>派单详细：</div>
                                <div class="widthStyle">油烟机怎么的怎么的贵阳 南明区南明区南明区南明区南明区</div>
                            </div>
                            <div class="flexBox">
                                <div>报修时间：</div>
                                <div class="widthStyle">2020/6/36 10:56:23</div>
                            </div>
                            <div class="btnStyle">
                                    <button>备注</button>
                                    <button>废单</button>
                                    <button>
                                        <a href="./orderDetails.html?keyword=3">详情</a>
                                    </button>
                                    <button>聊天</button>
        
                            </div>
                        </li>
                    </ul>
                </div>
        <!-- 已完成 -->
        <div class="cont">
            <ul>
                <li>
                    <div class="orderList">
                        <div class="flexBox">
                            <div class="orderNumber">1</div>
                        </div>

                    </div>
                    <div class="flexBox">
                        <div>地区：</div>
                        <div class="widthStyle">贵阳 南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>派单详细：</div>
                        <div class="widthStyle">油烟机怎么的怎么的贵阳 南明区南明区南明区南明区南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>报修时间：</div>
                        <div class="widthStyle">2020/6/36 10:56:23</div>
                    </div>
                    <div class="btnStyle">
                        <button>
                            <a href="./orderDetails.html?keyword=4">详情</a>
                        </button>
                        <button>聊天</button>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="orderList">
                        <div class="flexBox">
                            <div class="orderNumber">2</div>
                        </div>

                    </div>
                    <div class="flexBox">
                        <div>地区：</div>
                        <div class="widthStyle">贵阳 南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>派单详细：</div>
                        <div class="widthStyle">油烟机怎么的怎么的贵阳 南明区南明区南明区南明区南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>报修时间：</div>
                        <div class="widthStyle">2020/6/36 10:56:23</div>
                    </div>
                    <div class="btnStyle">
                        <button>
                            <a href="./orderDetails.html?keyword=4">详情</a>
                        </button>
                        <button>聊天</button>
                    </div>
                </li>
            </ul>
        </div>
   
        <!-- 废单 -->
        <div class="cont">
            <ul>
                <li>
                    <div class="orderList">
                        <div class="flexBox">
                            <div class="orderNumber">1</div>
                        </div>
                    </div>
                    <div class="flexBox">
                        <div>地区：</div>
                        <div class="widthStyle">贵阳 南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>派单详细：</div>
                        <div class="widthStyle">油烟机怎么的怎么的贵阳 南明区南明区南明区南明区南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>报修时间：</div>
                        <div class="widthStyle">2020/6/36 10:56:23</div>
                    </div>
                    <div class="btnStyle">
                        <button>
                            <a href="./orderDetails.html?keyword=5">详情</a>
                        </button>
                        <button>聊天</button>

                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="orderList">
                        <div class="flexBox">
                            <div class="orderNumber">2</div>
                        </div>
                    </div>
                    <div class="flexBox">
                        <div>地区：</div>
                        <div class="widthStyle">贵阳 南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>派单详细：</div>
                        <div class="widthStyle">油烟机怎么的怎么的贵阳 南明区南明区南明区南明区南明区</div>
                    </div>
                    <div class="flexBox">
                        <div>报修时间：</div>
                        <div class="widthStyle">2020/6/36 10:56:23</div>
                    </div>
                    <div class="btnStyle">
                        <button>
                            <a href="./orderDetails.html?keyword=5">详情</a>
                        </button>
                        <button>聊天</button>

                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

<script src="./static/jquery-1.12.2.min.js"></script>
<script>
    $('#list li').click(function () {
        //当前的li显示样式，其余的显示默认样式
        $(this).css('background', '#467704').siblings().css('background', '');
        $(this).css('color', '#fff').siblings().css('color', '#000');
        //显示对应块的类容,隐藏其余的块类容
        console.log(this)
        $('.cont').eq($(this).index()).show().siblings('.cont').hide();
    });
</script>
路边一只流浪猫
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用jQuery实现一个简单的表格上下翻页效果
12-29
前言 本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果，注：实现原理与轮播图相似。下面话不多说，来看看详细的 实现方法吧。 html: <div class=popup> <div class=group-caption> <span>日期</span><span>参与团购场次</span><span class=result>团购结果</span><span>当前状态</span> </div> <table class=group-buying-table> <tr><td
js简单table切换
最新发布
m0_56493571的博客
02-03 247
王昭君title: "吕布",不知火舞安琪拉吕布庄周周瑜
h5里常用的table切换、轮播图的简单模板
jwl18236975853的博客
05-01 2836
一：table栏切换简单模板 1.1：首先定义几个必须用到的css样式 当h5的标签被添加show类别的时候，就会显示；当h5里的标签被添加hidden_样式的时候就会被隐藏。 ​ ​ ​ .hidden_{ display：none； } .show{ display：block； } ​.active{ color:red; } ​ ​ 给出作为公共元素使用的几个h5标签 <d...
Table栏切换
涩的博客
06-24 6759
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可多次使用的jQuery tab选项卡</title> <style ty...
利用JavaScript实现tab页面切换效果
qq_68195068的博客
03-29 432
【代码】利用JavaScript实现tab页面切换效果。
jquery+原生HTML——实现table表格切换
七月❤的博客
04-13 811
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <style> .mod-tab .tab{ float:left; paddi.
jquery table(切换标签)
01-30
封装了切换代码，可以同个页面实现多个标签切换
jQuery Table选中表格行变色特效代码
03-20
在点击事件的回调函数中，可以使用jQuery的`.addClass()`和`.removeClass()`方法来动态切换表示选中状态的CSS类。一个常见的做法是创建两个CSS类：一个用于未选中状态，另一个用于选中状态。例如，未选中状态的类...
jq遍历table切换
11-29
"jq遍历table切换"就是这样一个功能，它通过简洁的jQuery代码实现表格内容的动态切换，以达到优化界面的目的。 首先，我们需要了解jQuery的基本用法。jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历...
table切换例子
11-16
"table切换"这个概念通常指的是用户可以通过某种交互方式在不同的表格数据之间进行切换，以便查看或操作多组相关但不同的数据。下面将详细讨论这个主题，包括其原理、实现方法以及实际应用。 一、表格（Table）基础...
jquery table分页 非常好用
05-26
首先，理解jQuery table分页的基本概念。表格分页是指将大量数据分成多个小块（通常每页显示固定数量的行），用户可以通过页码或导航按钮在这些数据块之间切换。这使得用户可以快速浏览和定位他们关心的信息，而无需...
html中table切换效果,从table转而使用div+css
weixin_30303283的博客
06-05 1159
一般来讲，table打好语法就可以呈现效果了，而且语法很简单，就单纯的table、tr、td，这三个语法就可以画出表格，在各个浏览器下也都可以正常的显示。如果觉得排版不漂亮，就直接在语法内加上width、color等等的属性值，效果很容易就达到了，可是这样会让程式码杂乱。对于搜寻引擎来讲，他们抓网站内容通常不会一次抓完，会先抓到一定的网页大小，之后再来，如果你把样式调整的程式码都放进去，很快的，搜...
关于网页特效tab栏切换的实现
qaz980930841的博客
12-05 324
$(function(){             $(".tab li").mouseenter(function(){                 var $this = $(this),                     index = $this.index();                 $this.addClass("active").siblings("li"
Tab切换效果（Html+css+js）
qq_62714412的博客
10-18 2544
本文主要是分享自己做过的一个tab练习，涉及到html+css+js内容，内容较容易，有利于初学者熟悉理解html+css+js的操作及解决问题的思路
2-table栏切换
lxllxl211的博客
03-21 204
【代码】2-table栏切换。
elementui动态切换table列内容
douyiqing的博客
10-09 3459
实际开发中经常会动态显示表格的某些列的内容，我把我实现的方法记录并且分享一下。 首先，不要使用v-show，要使用v-if。 其次，表格加载属于懒加载，所以每次切换内容需要让表格重新加载一次 实现方法，给表格加索引，每次切换改变索引值 直接上代码吧，通俗易懂 // 控制表格切换 <el-button type="primary" @click="toggleData">切换表格&lt...
vue获取输入框得内容_Vue踩坑小记
weixin_39790877的博客
11-20 610
这篇文章将包括但不限于Vue，也将包括Vue相关的组件库等内容的记载，定期更新本篇文章，如果有没涉及到的坑可以在评论里说明或着私信我，希望集思广益，对大家都有帮助。1、【IE】【element-ui】组件库中el-table: show-overflow-tooltip 临界值时失效 在IE下，内容长度临界值时 ，出现省略号，但是鼠标hover不显示toolTip。...
原生js之table切换
fish_skyyyy的博客
11-10 1852
用原生js实现table切换 效果图如下： 点击触发button变色，并使div中显示相对应的名称 首先先搭建模块，四个input，类型为button类型，再加四个div，搞定！ <input type="button" value="table1"> <input type="button" value="table2"> <input type="button" value="table3"> <input type="button" value="table
el-table切换页面或tabs记住滚动条位置
Fabricant的博客
05-16 1406
el-table切换记住滚动条位置
jquery原生分页插件包含table
10-13
jQuery原生分页插件是一种用于处理数据分页显示的工具，可以方便地将数据分割成多页，并提供相应的前后翻页、跳转至指定页等功能。对于包含表格的情况，jQuery原生分页插件同样适用。 使用jQuery原生分页插件来处理包含表格的分页可以按照以下步骤进行操作： 1. 首先，需要将表格数据准备好，可以从后台请求数据或者通过其他方式获取到需要展示的表格数据。 2. 接着，使用jQuery原生分页插件的初始化方法来将数据和相关的分页配置传入。具体的初始化方法会依插件的不同而有所差异，一般会提供一个参数来接受配置信息。 3. 在页面上选择一个位置，用于展示分页插件生成的分页导航条。通常，插件会根据配置信息生成对应的HTML结构，并将其插入到指定位置。 4. 分页导航条显示后，用户就可以通过点击导航按钮来切换不同的页码，或者输入指定页码进行跳转。在用户进行操作时，插件会根据相应的事件监听来更新表格数据的显示。 5. 最后，根据插件的提供方法，可以对当前页码、每页显示的数据条数等进行获取或者设置，方便进一步对数据进行处理。 总之，jQuery原生分页插件适用于包含表格的分页需求，可以根据其提供的方法和配置选项来实现表格数据的分页显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值