使用layui框架實(shí)現(xiàn)點(diǎn)擊左側(cè)導(dǎo)航切換右側(cè)內(nèi)容且右側(cè)選項(xiàng)卡跟隨變化的效果

發(fā)布時(shí)間：2020-11-10 17:15:54 作者：大海無量波濤兇

這篇文章主要介紹了基于HTML5實(shí)現(xiàn)點(diǎn)擊左側(cè)導(dǎo)航切換右側(cè)內(nèi)容且右側(cè)選項(xiàng)卡跟隨變化的效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

用了layui框架

1.home.html主界面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首頁</title>
        <script src="../js/jquery.js"></script>
        <link rel="stylesheet" href="../layui/css/layui.css">
    </head>
    <body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">
          <!--1.頭部區(qū)域-->
          <div class="layui-header">
            <div class="layui-logo">后臺(tái)管理</div>
            <!-- 頭部區(qū)域（可配合layui已有的水平導(dǎo)航） -->
            <ul class="layui-nav layui-layout-left">
            </ul>
            <ul class="layui-nav layui-layout-right">
              <!--<li class="layui-nav-item">
                <a href="javascript:;">
                  <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                  賢心
                </a>
                <dl class="layui-nav-child">
                  <dd><a href="">基本資料</a></dd>
                  <dd><a href="">安全設(shè)置</a></dd>
                </dl>
              </li>
              <li class="layui-nav-item"><a href="">退了</a></li>-->
            </ul>
          </div>
            <!--2.左側(cè)導(dǎo)航-->
          <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
              <!-- 左側(cè)導(dǎo)航區(qū)域（可配合layui已有的垂直導(dǎo)航） -->
              <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item leftdaohang" data-url="jiaose.html" mytitle="角色管理"><a>角色管理</a></li>
                <li class="layui-nav-item leftdaohang" data-url="zhanghao.html" mytitle="賬號(hào)管理"><a>賬號(hào)管理</a></li>
              </ul>
            </div>
          </div>
          <!--3.右側(cè)主體內(nèi)容區(qū)-->
          <div class="layui-body">
              <!--tabs標(biāo)簽-->
              <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
              <ul class="layui-tab-title">
             <!--   <li class="layui-this">角色管理</li>-->
              </ul>
              <div class="layui-tab-content" style="height: 150px;">
                <!--<div class="layui-tab-item layui-show">
                  1. 我個(gè)人比較喜歡卡片風(fēng)格的，所以你發(fā)現(xiàn)又是以卡片的風(fēng)格舉例
                  2. 刪除功能適用于所有風(fēng)格
                </div>-->
                <!--<div class="layui-tab-item">
                    <iframe  style="width: 100%;height: 100%;" scrolling="no" src="jiaose.html" ></iframe>
                </div>-->
              </div>
            </div> 
          </div>

           <!--4.底部固定區(qū)域-->
          <div class="layui-footer">
            <!-- 底部固定區(qū)域 -->
            © layui.com - 底部固定區(qū)域
          </div>
        </div>
        <script src="../layui/layui.all.js"></script>
        <script>
            layui.use('element', function(){
              var $ = layui.jquery
              ,element = layui.element; //Tab的切換功能，切換事件監(jiān)聽等，需要依賴element模塊
              
              //觸發(fā)事件
              var active = {
                tabAdd: function(){
                  //新增一個(gè)Tab項(xiàng)
                  var htmlurl=$(this).attr('data-url');
                  var mytitle=$(this).attr('mytitle'); 
//                  alert("觸發(fā)tab增加事件："+mytitle);
                  //先判斷是否已經(jīng)有了tab
                  var arrayObj = new Array();　//創(chuàng)建一個(gè)數(shù)組  
                      $(".layui-tab-title").find('li').each(function() {
                          var y = $(this).attr("lay-id"); 
                          arrayObj.push(y);
                   });
//                    alert("遍歷取到的數(shù)組："+arrayObj);
                    var have=$.inArray(mytitle, arrayObj);  //返回 3,
                    if (have>=0) {
                        //tab已有標(biāo)簽
//                        alert("遍歷的已有標(biāo)簽："+mytitle);
                      element.tabChange('demo', mytitle); //切換到當(dāng)前點(diǎn)擊的頁面
                    } else{
                      //沒有相同tab
//                      alert("遍歷的沒有相同tab："+mytitle);
                      element.tabAdd('demo', {
                        title:mytitle //用于演示
                        ,content: '<iframe style="width: 100%;height: 100%;" scrolling="no" src='+htmlurl+' ></iframe>'
                        ,id: mytitle //實(shí)際使用一般是規(guī)定好的id，這里以時(shí)間戳模擬下
                      })
                      element.tabChange('demo', mytitle); //切換到當(dāng)前點(diǎn)擊的頁面
                    }
                }
               
              };
              $(".leftdaohang").click(function(){
                var type="tabAdd";
                var othis = $(this);
//                var htmlurl=$(this).attr('data-url');
//                var mytitle=$(this).attr('mytitle');
                active[type] ? active[type].call(this, othis) : '';
              });
              
            });
        </script>
        <!--<script>
            var loginurl="http://localhost:8088/user/showUser";
            var mytoken=sessionStorage.getItem("gltoken");
            console.log("緩存的token:"+mytoken);
            netWorking();
            $(".leftdaohang").click(function(){
                var htmlurl=$(this).attr('data-url');
                var mytitle=$(this).attr('mytitle');
                addTab(mytitle);
                document.getElementById("myiframe").src=htmlurl;
            });
            function addTab (tabname) {
                 $(".layui-tab-title li").removeClass("layui-this");
                $('.layui-tab-title').append("<li>"+tabname+"</li>");
                  //觸發(fā)事件                
            }
            function netWorking () {
                    $.ajax({
                        type:"post",    
                        url:loginurl,    
                        data:{ 
                             token:mytoken
                        }, 
                        success: function(res) {
                           console.log("home請求數(shù)據(jù)1.："+res);
                              var datas=JSON.parse(res);
                        },
                        error:function() { 
                            alert("失敗");
                       } 
                    });        
            }
        </script>-->
    </body>
</html>

2.兩個(gè)切換界面（jiaose.html,zhanghao.html）:

jiaose.html

iaose.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>角色管理</title>
    </head>
    <body style="margin: 500px;text-align: center;background: burlywood;">
        <h1>角色管理</h1>
    </body>
</html>

zhanghao.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>賬號(hào)管理</title>
    </head>
    <body style="margin: 100px;">
        <h1>賬號(hào)管理</h1>
    </body>
</html>

到此這篇關(guān)于layui框架實(shí)現(xiàn)點(diǎn)擊左側(cè)導(dǎo)航切換右側(cè)內(nèi)容且右側(cè)選項(xiàng)卡跟隨變化的效果的文章就介紹到這了,更多相關(guān)html5實(shí)現(xiàn)點(diǎn)擊左側(cè)導(dǎo)航切換右側(cè)內(nèi)容內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！