jquery 显示div block none的怎么切换啊

浏览:2153 发布日期:2013年07月03日分类:前端开发关键字: jquery 显示div block none的怎么切换啊

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
#our_case{
margin-top:15px;
margin-left:45px;
width:454px;
height:36px;
margin-right:75px;
float:right;
}

#mobile_web{
float:left;
margin-left:1px;
width:80px;
height:20px;
border:1px solid #DBDFE5;
background:#DBDFE5;
padding-top:5px;
text-align:center;
cursor: pointer;
}
#mobile_app{
float:left;
margin-left:1px;
width:80px;
height:20px;
border:1px solid #DBDFE5;
background:#DBDFE5;
padding-top:5px;
text-align:center;
cursor: pointer;
}
#ebusiness{
float:left;
margin-left:1px;
width:80px;
height:20px;
border:1px solid #DBDFE5;
background:#DBDFE5;
padding-top:5px;
text-align:center;
cursor: pointer;
}
.show{
margin-top:35px;
margin-left:45px;
width:254px;
margin-right:15px;
float:right;
border:1px solid red;
}
.show ul{
list-style:none;
}
.show ul{
display:none;
float:left;
}
.show .block{
display:block;
float:left;
}
</style>
</head>
<body>
<div id="our_case">
<div id="mobile_web"> 手机网站</div>
<div id="mobile_app"> 移动应用</div>
<div id="ebusiness"> 电子商务</div>
</div>
<div class="show" id="show0">

<ul class="block">
<li>测试1</li>
<li>测试1</li>
<li>测试1</li>
</ul>

<ul>
<li>测试2</li>
<li>测试2</li>
<li>测试2</li>
</ul>

<ul>
<li>测试3</li>
<li>测试3</li>
<li>测试3</li>
</ul>

</body>
</html>

比如我点击手机网站的时候只显示测试1,然后更改背景颜色,点击移动应用的时候只显示测试2,再更改背景颜色。用jquery怎么实现切换啊。小弟刚入门,求大侠们指点!!

附件 QQ截图20130703110749.png ( 2.65 KB 下载:3 次 )

最佳答案

评论() 相关

后面还有条评论,

您需要登录后才可以评论登录 | 立即注册

漳河道人 11-17
jquery.min.js 文件总是被挂马,求助
精诚大帝 12-27
无事件的情况下jQuery如何替换后插入的标签
怀搋恩典 03-27
volist循环中jQuery如何使用thinkphp模板循环变量$i作为js自增id?
斗士看世界 03-08
使用ajax向thinkphp后台传递一维数值数组data怎么写
onlyquan 12-13
jquery一键控制checkbox全选,反选,全不选

收藏

赞

bony

积分:877 等级:LV2

热点推荐

(追記) (追記ここまで)

最新更新

我们

合作

网站

信息

ThinkPHP 是一个免费开源的,快速、简单的面向对象的轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。