poscms仿站知识点总结（二）

1.相同类型div添加不同class

遇到一个样式上的问题，模板页面有8个子项，样式都是一样，至于数据是可以用for循环来添加的，但是for循环的时候，每个div的

类名是无法及时更改的，但是模板页面每个div是依靠class名来识别的，没有用this来指明当前对象，你可以想象一下它是这样实现

hover效果的，class名为A的子项hover时，触发A的动效，class名为B的子项hover时，触发B的动效，而for循环出来的所有子项除了

数据不一样，其余都是一样的，包括class名，最后，决定用js来给它们添加不同的类名，这样各自之间的动效就不会互相干扰了。

        <script type="text/javascript" >
                  var box=$(".box");
                  var size=box.length;
                  var classname="";
                  for(var i=0;i<size;i++){
                      if(i==0){
                          $(box[i]).removeClass("box");
                          $(box[i]).addClass("liBox");
                          
                      }else{
                          classname="liBox"+(i+1);
                          $(box[i]).removeClass("box");
                          $(box[i]).addClass(classname);                          
                      }            
                  }        
        </script>

这样，就还原了模板页面原本每个div的类名，原本的样式表又能起作用了，且不会因为类名相同而互相干扰。

2.导航栏高亮的问题

其实这个很简单了，定义一个类名，写出高亮的样式，然后在每个页面为其添加类名，和上面的差不多

    <script type="text/javascript">
        $(function(){
            var naveco=$(".NItem");
            $(naveco[0]).removeClass("NItem");
            $(naveco[0]).addClass("NItem  NItemCur");
        });
    </script>

3.php与js之间的变量传值

            <input type="hidden" id="did" value={$cat.name}>
            <script type="text/javascript" charset="utf-8">
                var naveco=$(".NItem");
                var did=$("#did")[0].value;
                if( did=="资费列表"){
                    $(naveco[1]).removeClass("NItem");
                    $(naveco[1]).addClass("NItem  NItemCur");
                }else{
                    $(naveco[2]).removeClass("NItem");
                    $(naveco[2]).addClass("NItem  NItemCur");
                }
            </script>

这里巧妙的用了一个hidden的input标签，因为项目中两个栏目公用一个模板页面，那么导航栏的高亮问题，就需要根据传进来的

一个变量值来判断该给哪一栏高亮。

poscms仿站知识点总结（二）

猜你喜欢