点击显示隐藏样式

最新推荐文章于 2022-07-27 13:42:38 发布

前端小云儿

最新推荐文章于 2022-07-27 13:42:38 发布

阅读量167

点赞数

分类专栏： js mui

本文链接：https://blog.csdn.net/jieweiwujie/article/details/119811905

版权

js 同时被 2 个专栏收录

62 篇文章 0 订阅

订阅专栏

mui

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8">
       <title>1</title>
       <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-status-bar-style" content="black">
       <link rel="stylesheet" href="../css/mui.min.css">
       <style>
           html,
           body,
           .mui-bar,
           .mui-content {
               background-color: #FFFFFF;
           }

           .distance {
               margin-left: 5em;
           }

           .title-style {
               width: 8em;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
           }

           .ul-unit li {
               width: calc(100% / 4);
               height: 100%;
               padding: 0.5em 0;
               text-align: center;
               border-right: 1px solid #97C8FF;
               font-size: 0.8em;
               color: #1A1A1A;
           }

           .ul-unit {
               margin-top: 2em;
               list-style: none;
               display: flex;
               margin: 0 auto;
               padding: 0;
               justify-content: space-around;
               width: 100%;
               border: 1px solid #97C8FF;
               border-radius: 2em;
           }

           ul li.active {
               color: #2E91FF;
               background: #97C8FF;
           }

           ul li:first-of-type.active {
               border-radius: 2em 0 0 2em;
           }

           ul li:last-of-type {
               border-right: none;
           }

           ul li:last-of-type.active {
               border-radius: 0 2em 2em 0;
           }

           .mui-table-view {
               margin-top: 10%;
           }

           .mui-bar-nav {
               box-shadow: none;
           }


           /* */
               .mui-active {
                   color: #2E91FF;
                   background: #97C8FF;
               }
               .ul1 li{
                   height: 40px;
               }
           /* */
       </style>
   </head>

<body>

<ul class="ul1">
               <li num="0" class="mui-active">2</li>
               <li num="1" class="">1</li>
               <li num="2" class="">2</li>
               <li num="3" class="">3</li>
           </ul>
           <div id="connectLiList1"></div>
           
       </div>
   </body>
   <script src="../js/mui.min.js"></script>
   <script>

       var ulUtil = document.querySelector(".ul-unit");
       var libox = ulUtil.querySelectorAll('li');
       mui('.ul-unit').on('tap', 'li', function(ret) {
           ulUtil.querySelector("li.active").classList.remove("active");
           this.classList.add("active");
           var num = this.getAttribute('num');
           console.log(num);
           document.querySelector('#connectLiList').innerHTML = html2;
       })

       var ul1 = document.querySelector(".ul1");
       mui('.ul1').on('tap', 'li', function(ret) {
           ul1.querySelector("li.mui-active").classList.remove("mui-active");
           this.classList.add("mui-active");
           var num = this.getAttribute('num');
           console.log(num);
           document.querySelector('#connectLiList1').innerHTML = 123;
       })

</script>

</html>