用addClass() 方法為kingcms分類添加當前高亮
2020-04-08
用kingcms進行網頁制作的朋友都知道，如果分類只是用到二級的話，當前分類高亮可以直接用php來做一個判斷就可以了，如下：
{king:portal.list listid1='(king:listid1/)'}
<?
php if ('{king:this/}') {echo "<li class=\"active\">";} else {echo "<li>";}
?>
<a href="{king:listpath/}">{king:listname/}</a>
</li>
{/king:portal.list}但是如果要用到三級分類，那么，這個代碼就不適用了，要做到這種效果，改動也是比較大。我們可以用到jQuery里的addClass()方法輕松解決這個問題。我們先了解下它的定義和使用方法：
定義和用法
addClass() 方法向被選元素添加一個或多個類。
該方法不會移除已存在的 class 屬性，僅僅添加一個或多個 class 屬性。 提示：如需添加多個類，請使用空格分隔類名。
語法：
$(selector).addClass(class)
一個簡單的例子：
$(document).ready(function(){
$("p:first").addClass("intro");
});這句代碼意思是說向第一個p元素添加一個class類intro，然后你在CSS里定義了intro的樣式，在第一個P元素就自動加上了intro的CSS樣式。
來一個完整的例子
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:first").addClass("intro");
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>運行一下，看清楚上面有一個jquery.js。
在kingcms里，我們如何根據這個來做呢，我們只需找出分類的ID就可以。分類ID的標簽是：{king:listid/}，然后JS代碼這樣寫，注意下面的active{king:listid/}，下面的意思是說，向active{king:listid/}加一個class類.active的樣式。
<script type="text/javascript">
$(document).ready(function(){
$(".active{king:listid/}").addClass("active");
});
</script>HTML部分可以這樣寫
<div class="category">
<div class="cat-tree">
<ul>
{king:portal.listlistid1='167'}
<li class="clearfix">
<a href="{king:listpath/}">{king:listname/}</a>
<ul>
{king:portal.Listlistid1='(king:listid/)'}
<li><a href="{king:listpath/}" class="active{king:listid/}"><span class="icon-angle-right text-color text-small"></span>{king:listname/}</a></li>
{/king:portal.List}
</ul>
</li>
{/king:portal.list}
</ul>
</div>
</div>css部分樣式，我也寫下來吧。
.category .cat-tree{background:#3B3940;padding-bottom:10px;}
.category .cat-tree ul li{border-bottom:1px solid #47454D; padding:10px 0 10px 30px;}
.category .cat-tree ul li:last-child{border-bottom:none}
.category .cat-tree ul li a{font-size:18px; color:#D2D2D2;display:block;}
.category .cat-tree ul li a:hover{color:#FFBB05;}
.category .cat-tree ul li a span{font-size:16px; margin-right:5px;}
.category .cat-tree ul li ul{padding-top:3px;}
.category .cat-tree ul li ul li{padding:2px 0 2px 0px;border-bottom:none}
.category .cat-tree ul li ul li .text-color{color:#ABABAB}
.category .cat-tree ul li ul li a{font-size:14px; color:#B8B8B8;display:block;}
.category .cat-tree ul li ul li a.active,.category .cat-tree ul li a.active{color: #FFBB05;}addClass() 方法基本上可以說是萬金油一樣，無論你是一級還是二級還是三級四級無限級，它都可以用，注意，如果你想給一個元素添加多個類，請使用空格分隔類名。