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




Tag: KingCMS