栏目class导航
<div id="index_nav">
<div class="index_nav">
<ul>
<!-- 调用栏目 -->
<li><a href="{DT_PATH}"><div>{$MODULE[23][name]}</div></a></li>
<li><a href="{$MODULE[24][linkurl]}"><div>{$MODULE[24][name]}</div></a></li>
<li><a href="{$MODULE[25][linkurl]}"><div>{$MODULE[25][name]}</div></a></li>
<li><a href="{$MODULE[26][linkurl]}"><div>{$MODULE[26][name]}</div></a></li>
<li><a href="{$MODULE[27][linkurl]}"><div>{$MODULE[27][name]}</div></a></li>
</ul>
<div class="clear"></div>
</div>
</div>
=============================
<script type="text/javascript">
$(function(){
window.onload=function(){
var urlSearch = window.location.href;
$('.index_nav ul').find('li').each(function(){
var id= $(this).find('a').attr('href');
if(urlSearch == id){
$(this).find('a').addClass("on");
}
});
}
});
</script>
======================
#index_nav{width: 100%;height: auto;background: #4A90E2;}
.index_nav{width: 1200px;height: auto;margin: 0 auto;}
.index_nav li{float: left;width: 200px;height: 36px; text-align: center;border-top: 4px solid #4A90E2;line-height: 36px;font-size: 18px;}
.index_nav .on div{width: 200px;height: 36px;background: #fff;color: #4A90E2;}
.index_nav a{color: #fff;}
.index_nav a:hover{color: #4A90E2;background: red;}
a{color: red;}
.index_nav li div:hover{background: #fff;}
栏目class导航的更多相关文章
- .Net Core MVC 网站开发(Ninesky) 2.4、添加栏目与异步方法
在2.3中完成依赖注入后,这次主要实现栏目的添加功能.按照前面思路栏目有三种类型,常规栏目即可以添加子栏目也可以选择是否添加内容,内容又可以分文章或其他类型,所以还要添加一个模块功能.这次主要实现栏目 ...
- .Net Core MVC 网站开发(Ninesky) 2.2、栏目管理功能-System区域添加
在asp或asp.net中为了方便网站的结构清晰,通常把具有类似功能的页面放到一个文件夹中,用户管理功能都放在Admin文件夹下,用户功能都放在Member文件夹下,在MVC中,通常使用区域(Area ...
- IOS平台设计规范
一.UI的控件概述: 1.框架UI的元素分为4类: A:栏:状态栏目和导航栏的结合体; B:内容视图:应用显示的内容信息,包括相关的交互行为,例如滚屏.插入.删除等操作进行排序; C:控制元素:产品行 ...
- js二级下拉菜单
看似简单的一个菜单,确需要不少的知识点 1. getByClass getElementsByClassName 已经有大部分现代浏览器支持了,只有ie6,ie7,ie8是不支持的.所以对ie6,7, ...
- Oracle11g R2学习系列 之七安全性
其实,对于目前我使用的Oracle的水平来看,还达不到使用安全管理的高度,只是作为一个学习来看一下. 关于Oracle的安全管理,一般使用OEM来操作完成好了,入口是:OEM的“服务器”属性页中,选择 ...
- CSS换行2
1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...
- PhpCms_V9笔记
一.建立虚拟站点 1.先更改www目录下的站点名称,再找到apache, 打开"Apache2\conf\extra"下的"httpd-vhosts.conf" ...
- phpcms笔记
一.建立虚拟站点 1.先更改www目录下的站点名称,再找到apache, 打开"Apache2\conf\extra"下的"httpd-vhosts.conf" ...
- 总结一下最近用过的phpcms语法
到目前为止用到过的phpcms语法: 1.取栏目名称: {category[$catid][catname]} 2.取栏目地址: {category[14][url]} 3.取一级栏目: {pc:co ...
随机推荐
- linux大文件分包压缩和批量解压命令tar // tar 排除指定目录
压缩命令主要用到tar打包和split分割,命令如下: tar czf - aaa | split -b 1024m - bbb.tar.gz_ aaa可以是文件也可以是目录, 大小可以是b.k.m这 ...
- Linux文件的复制、删除和移动命令
cp命令 功能:将给出的文件或目录拷贝到另一文件或目录中,就如同DOS下的copy命令一样,功能非常强大. 语法:cp [选项] 源文件或目录 目标文件或目录 说明:该命令把指定的源文件复制到目 ...
- 理解css伪类和伪元素
伪类就是可以通过直接添加一个类样式达到同等效果,而伪元素,则需要先添加一个元素,然后在元素上添加样式才能达到同等效果 伪类 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的 ...
- label按钮和文字对齐
label按钮和文字对齐 做表单的时候,经常遇到:复选框和文字对不齐的情况 ========================== 下面方法可以对齐 <!--label [[--> < ...
- SSM框架开发web项目系列(六) SpringMVC入门
前言 我们最初的javaSE部分学习后,基本算是入门了,也熟悉了Java的语法和一些常用API,然后再深入到数据库操作.WEB程序开发,渐渐会接触到JDBC.Servlet/Jsp之类的知识,期间可能 ...
- 【STL深入理解】vector
这篇文章不打算讲述vector的基本用法,而是总结一下近期我大量阅读C++经典书籍时遇到的一些关于vector的容易忽略的知识点,特意将它们记录下来,以便以后查阅. 1.v[0]和v.at(0)的区别 ...
- lxml的另一种用法
python中lxml库是一个十分强大的xml解析库,最近在看<白帽子将web扫描>这本书的时候,里面提供了一种不同于以往的用法,因此在这将这个方法记录下来 传统的lxml库的使用方法类似 ...
- 【转载】Linux下的IO监控与分析
近期要在公司内部做个Linux IO方面的培训, 整理下手头的资料给大家分享下 各种IO监视工具在Linux IO 体系结构中的位置 源自 Linux Performance and Tuning G ...
- 从Unity中的Attribute到AOP(三)
上一篇我们对系统的Attributes进行了MSIL代码的查看,了解到了其本质就是一个类的构造函数.本章我们将编写自己的Attributes. 首先我们定义书的属性代码,如下: [AttributeU ...
- 85、flask之wtforms
本篇导航: wtforms组件的使用 自定义From组件 一.wtforms组件的使用 1.flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进 ...