一、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>