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=;i<size;i++){
if(i==){
$(box[i]).removeClass("box");
$(box[i]).addClass("liBox"); }else{
classname="liBox"+(i+);
$(box[i]).removeClass("box");
$(box[i]).addClass(classname);
}
}
</script>

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

2.导航栏高亮的问题

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

    <script type="text/javascript">
$(function(){
var naveco=$(".NItem");
$(naveco[]).removeClass("NItem");
$(naveco[]).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[]).removeClass("NItem");
$(naveco[]).addClass("NItem NItemCur");
}else{
$(naveco[]).removeClass("NItem");
$(naveco[]).addClass("NItem NItemCur");
}
</script>

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

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

4.

poscms仿站知识点总结(二)的更多相关文章

  1. poscms仿站知识点总结(一)

    最近在做基于poscms系统的企业站仿站项目,这个系列用于总结项目中遇到的一些前端问题,至于poscms,待我摸透之后再总结... 进入正题吧,仿站,首先是用仿站小工具把要仿的模板站扒下来,有时候会出 ...

  2. 关于WordPress建站的原理二三事

    在写关于仿站文章详情页如何制作之前,我觉得有必要就一些原理性的问题,做一些说明.文章详情页的核心模块和首页有很多相似的地方,比如调用文章的标题.文章的内容.文章分类.作者等,实现起来都差不多,因此,了 ...

  3. [zencart教程]zencart外贸建站仿站交流俱乐部

    [zencart教程]zencart外贸建站仿站交流俱乐部 1.你想自主一天仿做一个精美的zencart 外贸网站; 2.你想自已自主定制精美的psd 图 zencart模板,并把它变成自定义精美 z ...

  4. 织梦仿站列表页pagelist分页显示竖排,如何修改成横排?

    织梦仿站列表页pagelist分页显示竖排,如何修改成横排? 织梦列表页的分页标签是采用pagelist来进行调用的,但是很多人在调用之后会出现一个列表竖着排列的问题(横排美观度好一些),还是非常不美 ...

  5. Zencart视频教程 Zencart模板制作教程视频 Zencart仿站教程资料

    Zen Cart是国外一个免费的.界面友好,开放式源码的购物车软件,是目前外贸行业使用最为广泛的网站程序.本仿站技术需要你有一定的html和css基础,易学易懂,一步一步地教你操作和使用Zen Car ...

  6. A:手把手教Wordpress仿站(基础)

    安装源码 需要服务器有php环境(PHP,Mysql,Apeach/Ngnax) 我用的主机宝(环境一键安装工具)   打开后台突然出现这种情况 Briefly unavailable for sch ...

  7. mac使用wget下载网站(仿站)

    wget -c -r -np -k -L -p http://www.xxxx.com 参考 wget的安装 http://blog.csdn.net/ssihc0/article/details/7 ...

  8. 原”zencart建站仿站俱乐部”现升级为”zencart 学院“!

    特别告示: 原”zencart建站仿站俱乐部”现升级为”zencart 学院“!

  9. Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable 这里讲一下如何实现PS调色板中的透明度 ...

随机推荐

  1. Spark学习笔记--安装SCALA和IDEA开发环境

    一:安装Scala

  2. HTML 块级元素与行内元素

    1.块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它只能用来容纳其他块元素. 2.如果没有css的作用,块元素 ...

  3. Php 删除数组后几个元素

    <?php /* * 文件分类: practice@helkbore * 删除数组后几个元素 年2月5日10:24:42 */ $arr1 = array('aa', 'b', 'c', 'dd ...

  4. Mac OS X下搭建Android开发环境(包括SDK和NDK)

    资源准备:  JDK Eclipse Android SDK Android NDK ADT CDT ANT 搭建Android SDK开发环境: 1.JDK安装,要求版本>1.5, Mac O ...

  5. PL/SQL编程—分页功能(存储过程)

    SQL),bookname ),publish )); Table created SQL> SQL> create or replace procedure sp_add_book(bo ...

  6. centos/linux扩容Swap分区

    查看现在的swap容量 [root@node1 ~]# free -h total used free shared buff/cache available Mem: 15G 3.8G 2.1G 5 ...

  7. Linux中df命令查询磁盘信息和fdisk命令分区的用法

    df - 报告文件系统磁盘空间的使用情况  总览 df [OPTION]... [FILE]... POSIX 选项: [-kP] GNU 选项 (最短方式): [-ahHiklmPv] [-t fs ...

  8. 深入理解JVM 垃圾收集器(下)G1收集器

    1.回顾CMS 1.1堆内存结构 1.2新生代GC 1.3老年代GC 2.G1收集器 2.1G1实现概览及使用场景 G1的推荐使用场景 2.2GC 2.2.1新生代GC 2.2.2老年代GC 老年代G ...

  9. Docker高级使用

    Docker卸载应用程序 先删除容器,在删除镜像 查询容器 docker ps –a 使用容器id删除容器 docker rm 18e672ecd8ed 查询镜像 docker images 使用镜像 ...

  10. 搭建maven项目步骤

    整体项目结构如下: 第一步 第二步 第三步:删除src目录,只留pom文件 第四步: 第五步: 6 7 8 9 10 11 12