用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() 方法基本上可以说是万金油一样，无论你是一级还是二级还是三级四级无限级，它都可以用，注意，如果你想给一个元素添加多个类，请使用空格分隔类名。