zoukankan
html css js c++ java
基于Jquery的内容显示模块
最近在学习Jquery,看到好多网站的内容切换模块,也想用Jquery做一个。很简单。代码如下:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>
无标题页
</
title
>
<
script
src
="js/jquery-1.2.3-intellisense.js"
type
="text/javascript"
></
script
>
<
style
type
="text/css"
>
.menu
{
}
{
margin
:
0
;
padding
:
0
;
border
:
0
;
width
:
300px
;
}
.menu div
{
}
{
width
:
300px
;
height
:
200px
;
border-color
:
Red
;
border-style
:
solid
;
border-width
:
1px
;
color
:
Red
;
float
:
left
;
display
:
none
}
.menu ul
{
}
{
padding
:
0
;
margin
:
0
;
list-style-type
:
none
;
float
:
left
;
}
.menu li
{
}
{
width
:
70px
;
border-width
:
1px 1px 0px 1px
;
border-color
:
Red
;
border-style
:
solid
;
float
:
left
;
height
:
28px
;
margin-right
:
2px
;
text-align
:
center
;
line-height
:
28px
;
font-weight
:
bold
;
}
</
style
>
<
script
type
="text/javascript"
language
="javascript"
>
$(document).ready(
function
()
{
$(
"
.menu div:eq(0)
"
).css(
"
display
"
,
"
block
"
)
$(
"
li:eq(0)
"
).css(
"
background
"
,
"
#eee
"
)
$(
"
li
"
).mouseover(
function
(index)
{
$(
"
li
"
).css(
"
color
"
,
""
);
$(
this
).css(
"
color
"
,
"
red
"
)
var
tex
=
$(
this
);
$(
"
.menu div
"
).css(
"
dispaly
"
,
"
none
"
);
for
(k
=
0
;k
<
$(
"
.menu li
"
).length;k
++
)
{
if
($(
"
.menu li:eq(
"
+
k
+
"
)
"
).text()
==
tex.text())
{
$(
"
.menu li
"
).css(
"
background
"
,
""
);
$(
"
.menu li:eq(
"
+
k
+
"
)
"
).css(
"
background
"
,
"
#eee
"
);
if
(k
<
$(
"
.menu div
"
).length)
{
$(
"
.menu div
"
).css(
"
display
"
,
"
none
"
)
$(
"
.menu div:eq(
"
+
k
+
"
)
"
).css(
"
display
"
,
"
block
"
)
}
}
}
}
)
}
)
</
script
>
</
head
>
<
body
>
<
div
class
="menu"
>
<
ul
><
li
>
选项一
</
li
><
li
>
选项二
</
li
><
li
>
选项三
</
li
><
li
>
选项四
</
li
></
ul
>
<
div
>
我是选项一
</
div
>
<
div
>
我是选项二
</
div
>
<
div
>
我是选项三
</
div
>
</
div
>
</
body
>
</
html
>
感觉jquery非常的方便,实现一些小功能很容易。
查看全文
相关阅读:
vc++操作mysql数据库的技巧
[翻译]用表单字段加亮的方式为用户提供友好的界面
设计方法开篇
周末之个人杂想(五)
ComponentArt对Atlas的集成
[翻译]使用ASP.NET2.0的ReportViewer查看RDLC报表
[视频讲解]GridView里做链接实现新闻列表到详细内容页的跳转
关于正则表达式
周末之个人杂想(七)
风
原文地址:https://www.cnblogs.com/henq/p/henq.html
最新文章
Sqlserver中新建数据库用户 dodo
IIf的用法 dodo
DotNetNuke中理解{objectQualifier} {databaseOwner} dodo
如何在后台代码中设置和获取用户控件中的子控件的属性? dodo
dnn中Settings("movie") 用法? dodo
dnn中COMPONENTART:TREEVIEW 控件的使用(act) dodo
Bing Maps进阶系列四:路由功能服务(RouteService)
Bing Maps进阶系列三:使用地图图像服务(ImageryService)
Bing Maps进阶系列一:初识Bing Maps地图服务
Bing Maps进阶系列二:使用GeocodeService进行地理位置检索
热门文章
DeepEarth中的几何图形基础框架模型
MySQL数据库接口的VC具体实现与应用
MySQL数据库的双向加密方式
加入ICTCLAS4J,一起学习分词系统
boost正则库匹配ASII编码的中文、全角字符示例
Using AES encryption in MySQL and PHP
jsp jsp:useBean 在第二个jsp页面访问第一个jsp页面中产生的ArrayList
MySQL 加密
boost regex语法规范
Boost学习之正则表达式regex
Copyright © 2011-2022 走看看