鍍金池/ 問答/HTML5  HTML/ layui后臺布局，左側(cè)選項卡的超鏈接如何對應(yīng)到右側(cè)？

layui后臺布局，左側(cè)選項卡的超鏈接如何對應(yīng)到右側(cè)？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 后臺大布局 - Layui</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后臺布局</div>
    <!-- 頭部區(qū)域（可配合layui已有的水平導(dǎo)航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制臺</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用戶</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系統(tǒng)</a>
        <dl class="layui-nav-child">
          <dd><a href="">郵件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授權(quán)管理</a></dd>
        </dl>
      </li>
    </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>
  
  <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 layui-nav-itemed">
          <a class="" href="javascript:;">所有商品</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超鏈接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解決方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超鏈接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市場</a></li>
        <li class="layui-nav-item"><a href="">發(fā)布商品</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 內(nèi)容主體區(qū)域 -->
    <div style="padding: 15px;">內(nèi)容主體區(qū)域</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定區(qū)域 -->
    ? layui.com - 底部固定區(qū)域
  </div>
</div>
<script src="../src/layui.js"></script>
<script>
//JavaScript代碼區(qū)域
layui.use('element', function(){
  var element = layui.element;
  
});
</script>
</body>
</html>

例如“列表一”的超鏈接如何對應(yīng)到右側(cè)空白區(qū)域，而不是整頁的變化

回答
編輯回答
胭脂淚

參見vue-router的route-link和route-view

不是整頁的變化就只能是頁面的局部異步刷新，這簡直就是SPA的思想

然而你可以換個思路，即使是整頁的變化，變更前后左邊都保持相對的狀態(tài)，也就可以看做是只替換了右邊的內(nèi)容

2017年7月4日 07:09
編輯回答
茍活

最簡單的方法是聲明2個變量，分別存儲鏈接對象，接下來的操作就簡單啦，另外我記得Lay文檔有說明的，你注意看下官網(wǎng)給出的文檔，我之前也用layui寫過類似功能。

2018年7月13日 22:18