Layui 導(dǎo)航默認(rèn)展開(kāi)和菜單欄選中高亮設(shè)置的方法
更新時(shí)間：2019年09月04日 10:06:44 作者：黃寶康
今天小編就為大家分享一篇Layui 導(dǎo)航默認(rèn)展開(kāi)和菜單欄選中高亮設(shè)置的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
如下所示：
<ul class="layui-nav layui-nav-tree custom-nav-tree" lay-filter="kitNavbar" kit-navbar>
<c:if test="${title_sys eq '內(nèi)容管理' }">
<li class="layui-nav-item index1 layui-nav-itemed"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="fa fa-plug" aria-hidden="true"></i><span>宣傳教育</span></a>
<dl class="layui-nav-child">
<dd class="layui-this">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/jctt',icon:'',title:'基層頭條',id:'73'}"><i class="layui-icon" aria-hidden="true"></i><span>基層頭條</span></a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/dyxf',icon:'',title:'黨員先鋒',id:'74'}"><i class="layui-icon" aria-hidden="true"></i><span>黨員先鋒</span></a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/wdk',icon:'',title:'微黨課',id:'75'}"><i class="layui-icon" aria-hidden="true"></i><span>微黨課</span></a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/remote_education',icon:'',title:'遠(yuǎn)程教育',id:'76'}"><i class="layui-icon" aria-hidden="true"></i><span>遠(yuǎn)程教育</span></a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/constant/ad',icon:'',title:'廣告輪播',id:'77'}"><i class="layui-icon" aria-hidden="true"></i><span>廣告輪播</span></a>
</dd>
</dl>
</li>
<li class="layui-nav-item index4"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="fa fa-plug" aria-hidden="true"></i><span>每日一學(xué)</span></a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/mryx_type',icon:'',title:'學(xué)習(xí)類型管理',id:'200'}"><i class="layui-icon" aria-hidden="true"></i><span>學(xué)習(xí)類型管理</span></a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/mryx',icon:'',title:'知識(shí)點(diǎn)管理',id:'201'}"><i class="layui-icon" aria-hidden="true"></i><span>知識(shí)點(diǎn)管理</span></a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/mryx_publish',icon:'',title:'發(fā)布記錄列表',id:'202'}"><i class="layui-icon" aria-hidden="true"></i><span>發(fā)布記錄列表</span></a>
</dd>
</dl>
</li>
<li class="layui-nav-item index5"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="fa fa-plug" aria-hidden="true"></i><span>每月一考</span></a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/quest_type_index',icon:'',title:'題庫(kù)類型',id:'80'}"><i class="layui-icon" aria-hidden="true"></i><span>題庫(kù)類型</span></a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/quest_index',icon:'',title:'考題管理',id:'81'}"><i class="layui-icon" aria-hidden="true"></i><span>考題管理</span></a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/quest_model_index',icon:'',title:'考卷模板',id:'82'}"><i class="layui-icon" aria-hidden="true"></i><span>考卷模板</span></a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path %>/content/exam_index',icon:'',title:'考卷管理',id:'83'}"><i class="layui-icon" aria-hidden="true"></i><span>考卷管理</span></a>
</dd>
<dd>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" kit-target data-options="{url:'<%=path%>/content/record_index',icon:'',title:'考試記錄',id:'84'}"><i class="layui-icon" aria-hidden="true"></i><span>考試記錄</span></a>
</dd>
</dl></li>
</c:if>
</ul>
在第一個(gè)宣傳教育li中添加class為layui-nav-itemed，以及在第一個(gè)dd中添加class為layui-this。
效果展示如下：
本人也是通過(guò)查看點(diǎn)擊相應(yīng)導(dǎo)航，在瀏覽器控制臺(tái)查看渲染后的class，得出此結(jié)果。
以上這篇Layui 導(dǎo)航默認(rèn)展開(kāi)和菜單欄選中高亮設(shè)置的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
js插件YprogressBar實(shí)現(xiàn)漂亮的進(jìn)度條效果
ProgressBar.js 是一個(gè)借助動(dòng)態(tài) SVG 路徑的漂亮的，響應(yīng)式的進(jìn)度條效果。使用 ProgressBar.js 可以很容易地創(chuàng)建任意形狀的進(jìn)度條。這個(gè) JavaScript 庫(kù)提供線條，圓形和方形等幾個(gè)內(nèi)置的形狀，但你可使用 Illustrator 或任何其它的矢量圖形編輯器創(chuàng)建自己的進(jìn)度條效果。2015-04-04
javascript document.referrer 用法
document對(duì)象的referrer屬性，返回導(dǎo)航到當(dāng)前網(wǎng)頁(yè)的超鏈接所在網(wǎng)頁(yè)的URL。2009-04-04
這篇文章主要介紹了百度移動(dòng)版的url編碼解碼的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
JS中關(guān)于Class類的靜態(tài)屬性和靜態(tài)方法
這篇文章主要介紹了JS中關(guān)于Class類的靜態(tài)屬性和靜態(tài)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
給大家分享一下如何才能開(kāi)發(fā)出更好的JavaScript模塊和功能，有興趣的朋友參考學(xué)習(xí)下吧。2017-12-12
JavaScript實(shí)現(xiàn)的簡(jiǎn)單加密解密操作示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡(jiǎn)單加密解密操作,涉及javascript基于charCodeAt與fromCharCode的字符串編碼與解碼操作相關(guān)使用技巧,需要的朋友可以參考下2018-06-06
js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)到最底部示例代碼
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)到最底部的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06
javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
javascript實(shí)現(xiàn)無(wú)法關(guān)閉的彈框
本文分享了javascript實(shí)現(xiàn)無(wú)法關(guān)閉的彈框的實(shí)例代碼，感興趣的朋友可以看下2016-11-11
JS操作xml對(duì)象轉(zhuǎn)換為Json對(duì)象示例
本篇文章主要介紹了JS操作xml對(duì)象轉(zhuǎn)換為Json對(duì)象示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03