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标签,因为项目中两个栏目公用一个模板页面,那么导航栏的高亮问题,就需要根据传进来的
一个变量值来判断该给哪一栏高亮。
4.