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=;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仿站知识点总结(二)的更多相关文章
- poscms仿站知识点总结(一)
最近在做基于poscms系统的企业站仿站项目,这个系列用于总结项目中遇到的一些前端问题,至于poscms,待我摸透之后再总结... 进入正题吧,仿站,首先是用仿站小工具把要仿的模板站扒下来,有时候会出 ...
- 关于WordPress建站的原理二三事
在写关于仿站文章详情页如何制作之前,我觉得有必要就一些原理性的问题,做一些说明.文章详情页的核心模块和首页有很多相似的地方,比如调用文章的标题.文章的内容.文章分类.作者等,实现起来都差不多,因此,了 ...
- [zencart教程]zencart外贸建站仿站交流俱乐部
[zencart教程]zencart外贸建站仿站交流俱乐部 1.你想自主一天仿做一个精美的zencart 外贸网站; 2.你想自已自主定制精美的psd 图 zencart模板,并把它变成自定义精美 z ...
- 织梦仿站列表页pagelist分页显示竖排,如何修改成横排?
织梦仿站列表页pagelist分页显示竖排,如何修改成横排? 织梦列表页的分页标签是采用pagelist来进行调用的,但是很多人在调用之后会出现一个列表竖着排列的问题(横排美观度好一些),还是非常不美 ...
- Zencart视频教程 Zencart模板制作教程视频 Zencart仿站教程资料
Zen Cart是国外一个免费的.界面友好,开放式源码的购物车软件,是目前外贸行业使用最为广泛的网站程序.本仿站技术需要你有一定的html和css基础,易学易懂,一步一步地教你操作和使用Zen Car ...
- A:手把手教Wordpress仿站(基础)
安装源码 需要服务器有php环境(PHP,Mysql,Apeach/Ngnax) 我用的主机宝(环境一键安装工具) 打开后台突然出现这种情况 Briefly unavailable for sch ...
- mac使用wget下载网站(仿站)
wget -c -r -np -k -L -p http://www.xxxx.com 参考 wget的安装 http://blog.csdn.net/ssihc0/article/details/7 ...
- 原”zencart建站仿站俱乐部”现升级为”zencart 学院“!
特别告示: 原”zencart建站仿站俱乐部”现升级为”zencart 学院“!
- Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable
版权声明:本文为博主原创文章,未经博主允许不得转载. Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable 这里讲一下如何实现PS调色板中的透明度 ...
随机推荐
- Spark学习笔记--安装SCALA和IDEA开发环境
一:安装Scala
- HTML 块级元素与行内元素
1.块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它只能用来容纳其他块元素. 2.如果没有css的作用,块元素 ...
- Php 删除数组后几个元素
<?php /* * 文件分类: practice@helkbore * 删除数组后几个元素 年2月5日10:24:42 */ $arr1 = array('aa', 'b', 'c', 'dd ...
- Mac OS X下搭建Android开发环境(包括SDK和NDK)
资源准备: JDK Eclipse Android SDK Android NDK ADT CDT ANT 搭建Android SDK开发环境: 1.JDK安装,要求版本>1.5, Mac O ...
- PL/SQL编程—分页功能(存储过程)
SQL),bookname ),publish )); Table created SQL> SQL> create or replace procedure sp_add_book(bo ...
- centos/linux扩容Swap分区
查看现在的swap容量 [root@node1 ~]# free -h total used free shared buff/cache available Mem: 15G 3.8G 2.1G 5 ...
- Linux中df命令查询磁盘信息和fdisk命令分区的用法
df - 报告文件系统磁盘空间的使用情况 总览 df [OPTION]... [FILE]... POSIX 选项: [-kP] GNU 选项 (最短方式): [-ahHiklmPv] [-t fs ...
- 深入理解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 ...
- Docker高级使用
Docker卸载应用程序 先删除容器,在删除镜像 查询容器 docker ps –a 使用容器id删除容器 docker rm 18e672ecd8ed 查询镜像 docker images 使用镜像 ...
- 搭建maven项目步骤
整体项目结构如下: 第一步 第二步 第三步:删除src目录,只留pom文件 第四步: 第五步: 6 7 8 9 10 11 12