您的位置：首页 > 编程语言

简单的切换代码附控制多个切换方法

2016-03-09 09:44 141 查看

　　现在做网站，难免会用到切换，让有限的空间展示更多的内容，甚至有时候一个页面还不止一个切换版块。那么，这个时候要如何让代码简洁、简单呢?

　　最近在网上找到一个方法，感觉还可以。程序代码比较简单，而且可以单独写CSS样式来实现多样化!以下是我改好之后的一个案例，分享出来供大家或者今后遗忘掉这个方法的自己来参考!

　　首先，调用jquery，最好去网上下载最新版本:

然后是css样式：

*{margin:0;padding:0;}
img{border:0;}
ul,li,form{list-style:none;}
a:link{text-decoration:none;}
/***********第一个切换的样式***************/
.idx4{width:100%;overflow:hidden;background:url(http://www.39gd.com/img2015/idx4_bg.jpg) center 0 repeat-y;height:641px;}
.slide{width:1000px;margin:0 auto;height:641px;overflow:hidden;}
.slide .bh{float:left;width:158px;}
.slide .bh li{width:145px;float:left;background:#1390b6;height:213px;margin-bottom:1px;position:relative;}
.slide .bh li img{width:94px;height:109px;float:left;padding:52px 25px;}
.slide .bh li img.idx4_on{width:13px;height:22px;position:absolute;right:-14px;top:95px;padding:0;display:none;}
.slide .bh li.on img.idx4_on{display:block;}
.slide .bd{float:right;width:828px;height:641px;}
.slide .bd img{float:left;}
.slide .bd a:hover{opacity:0.9;filter:alpha(opacity=90);}
/***********第二个切换的样式***************/
.art{width:1000px;margin:0 auto;overflow:hidden;}
.slide2{width:1000px;background:#ebebeb;overflow:hidden;height:240px;float:left;padding:6px;}
.art .bh{width:100px;float:left;}
.art .bh li{width:100px;height:25px;padding-left:10px;margin-top:8px;font:14px/22px "SimSun";float:left;border-bottom:1px dashed #e5e5e5;}
.art .bh li a{color:#202020;}
.art .bh li.on{background:#fff;}
.art .bd{width:884px;height:240px;float:left;background:#fff;}
.art .bd div{width:884px;height:240px;}
.art .bd ul{width:380px;height:198px;padding:16px;overflow:hidden;float:left;margin:0 10px;}
.art .bd li{font:14px/26px "SimSun";height:26px;margin-top:6px;border-bottom:1px dotted #b2b2b2;color:#727171;}
.art .bd li a{color:#202020;}

　　HTML代码：

<div class="idx4">
<div class="slide">
<ul class="bh">
<li><img alt="99天快速治疗不孕不育" src="http://www.39gd.com/img2015/idx4_bh1.jpg" /><img alt="相关技术" class="idx4_on" src="http://www.39gd.com/img2015/idx4_on.jpg" /></li>
<li><img alt="赶走妇科疾病,从此萌萌哒" src="http://www.39gd.com/img2015/idx4_bh2.jpg" /><img alt="相关技术" class="idx4_on" src="http://www.39gd.com/img2015/idx4_on.jpg" /></li>
<li><img alt="安心产检,放心分娩" src="http://www.39gd.com/img2015/idx4_bh3.jpg" /><img alt="相关技术" class="idx4_on" src="http://www.39gd.com/img2015/idx4_on.jpg" /></li></ul>
<ul class="bd">
<li>
<a href="http://www.39gd.com/yy/tsjs/13000.html"><img alt="智能型生育镜" src="http://www.39gd.com/img2015/idx4_bd1_01.jpg" /></a>
<a href="http://www.39gd.com/yy/tsjs/13001.html"><img alt="无痛输卵管造影" src="http://www.39gd.com/img2015/idx4_bd1_02.jpg" /></a>
<a href="http://www.39gd.com/yy/tsjs/13002.html"><img alt="内分泌平衡四维疗法" src="http://www.39gd.com/img2015/idx4_bd1_03.jpg" /></a>
<a href="http://www.39gd.com/yy/tsjs/13003.html"><img alt="中西医平衡辩证理疗法" src="http://www.39gd.com/img2015/idx4_bd1_04.jpg" /></a>
<a href="javascript:void(0)" onClick="openZoosUrl('chatwin','&r=39gd.com&p=39gd.com');LR_HideInvite();return false;" rel="nofollow" target="_blank"><img alt="十五项治不孕金牌技术" src="http://www.39gd.com/img2015/idx4_bd1_05.jpg" /></a>
<a href="http://www.39gd.com/yy/tsjs/13004.html"><img alt="输卵管堵塞'全景式'探查术" src="http://www.39gd.com/img2015/idx4_bd1_06.jpg" /></a>
<a href="http://www.39gd.com/yy/tsjs/13005.html"><img alt="孕前U+检查法" src="http://www.39gd.com/img2015/idx4_bd1_07.jpg" /></a>
<a href="http://www.39gd.com/yy/zgjl/12267.html"><img alt="动脉栓塞介入疗法" src="http://www.39gd.com/img2015/idx4_bd1_08.jpg" /></a>
<a href="http://www.39gd.com/yy/tsjs/13006.html"><img alt="治不育针功夫" src="http://www.39gd.com/img2015/idx4_bd1_09.jpg" /></a></li>
<li>
<a href="http://www.39gd.com/yy/jc/13007.html"><img alt="营养修复因子导入疗法" src="http://www.39gd.com/img2015/idx4_bd2_01.jpg" /></a>
<a href="http://www.39gd.com/yy/tslf/11678.html"><img alt="量子平衡疗法" src="http://www.39gd.com/img2015/idx4_bd2_02.jpg" /></a>
<a href="/zt/myke/"><img alt="韩国美珂Myke呵乳" src="http://www.39gd.com/img2015/idx4_bd2_03.jpg" /></a>
<a href="http://www.39gd.com/yy/alzx/12094.html"><img alt="CEO人流服务体系" src="http://www.39gd.com/img2015/idx4_bd2_04.jpg" /></a>
<a href="javascript:void(0)" onClick="openZoosUrl('chatwin','&r=39gd.com&p=39gd.com');LR_HideInvite();return false;" rel="nofollow" target="_blank"><img alt="治女人病,选对技术很重要!" src="http://www.39gd.com/img2015/idx4_bd2_05.jpg" /></a>
<a href="/zt/zswtrl/"><img alt="爱维丝直视人流手术" src="http://www.39gd.com/img2015/idx4_bd2_06.jpg" /></a>
<a href="http://www.39gd.com/yy/SWEET/13008.html"><img alt="薇薇无痛人流技术" src="http://www.39gd.com/img2015/idx4_bd2_07.jpg" /></a>
<a href="http://www.39gd.com/yy/SHE/13009.html"><img alt="SHE'S人流术" src="http://www.39gd.com/img2015/idx4_bd2_08.jpg" /></a>
<a href="http://www.39gd.com/yy/qps/13010.html"><img alt="微创宫腔镜取胚术" src="http://www.39gd.com/img2015/idx4_bd2_09.jpg" /></a></li>
<li>
<a href="/zt/omswcz/"><img alt="欧美版四维彩超" src="http://www.39gd.com/img2015/idx4_bd3_01.jpg" /></a>
<a href="http://www.39gd.com/yy/pfc/13011.html"><img alt="隐藏式'无痕'剖宫产" src="http://www.39gd.com/img2015/idx4_bd3_02.jpg" /></a>
<a href="/zt/mscqs/"><img alt="美式'隐形'会阴侧切术" src="http://www.39gd.com/img2015/idx4_bd3_03.jpg" /></a>
<a href="http://www.39gd.com/yy/ch/13012.html"><img alt="盆底康复治疗和卵巢保养项目计划" src="http://www.39gd.com/img2015/idx4_bd3_04.jpg" /></a>
<a href="http://www.39gd.com/yy/cqjc/13013.html"><img alt="无创基因检测" src="http://www.39gd.com/img2015/idx4_bd3_05.jpg" /></a>
<a href="javascript:void(0)" onClick="openZoosUrl('chatwin','&r=39gd.com&p=39gd.com');LR_HideInvite();return false;" rel="nofollow" target="_blank"><img alt="国际顶尖技术,消除从怀孕到分娩的顾虑" src="http://www.39gd.com/img2015/idx4_bd3_06.jpg" /></a></li></ul></div></div>
<div class="art">
<div class="slide2">
<ul class="bh">
<li><a href="http://www.39gd.com/yy/new/">医院新闻</a></li>
<li><a href="http://www.39gd.com/yy/Yunyu/">不孕不育</a></li>
<li><a href="http://www.39gd.com/yy/Chanke/">产科中心</a></li>
<li><a href="http://www.39gd.com/yy/fkzx/">妇科中心</a></li>
<li><a href="http://www.39gd.com/yy/Huaiyun/">无痛人流</a></li>
<li><a href="http://www.39gd.com/yy/zhongliu/">妇科肿瘤</a></li>
<li><a href="http://www.39gd.com/yy/Zhengxing/">妇科整形</a></li></ul>
<div class="bd">
<div><ul>
<li>[2016-03.09]<a href="http://www.39gd.com/yy/new/13927.html">庆三八节，百医千号公益行</a></li>
<li>[2016-01.14]<a href="http://www.39gd.com/yy/alzx/13606.html">2016抢生猴宝倒计时!</a></li>
<li>[2016-01.09]<a href="http://www.39gd.com/yy/alzx/13585.html">她9岁时失去的，28岁的今天广州女子医院还给</a></li>
<li>[2015-10.27]<a href="http://www.39gd.com/yy/alzx/13226.html">1443名孕妇同练瑜伽 刷新吉尼斯世界纪录荣誉</a></li>
<li>[2015-10.19]<a href="http://www.39gd.com/yy/alzx/13203.html">“生育力评估”公益活动，专家会诊，优惠检</a></li>
<li>[2015-10.19]<a href="http://www.39gd.com/yy/alzx/13202.html">要备孕治不孕，先免费评估，再享检查优惠</a></li></ul>
<ul>
<li>[2015-09.09]<a href="http://www.39gd.com/yy/new/7936.html">广州做人流去哪家医院好</a></li>
<li>[2009-10.24]<a href="http://www.39gd.com/yy/new/2381.html">“排阴毒”真能治所有妇科病？？</a></li>
<li>[2009-10.24]<a href="http://www.39gd.com/yy/new/2383.html">微创技术治疗妇科肿瘤成主流</a></li>
<li>[2009-10.24]<a href="http://www.39gd.com/yy/new/2382.html">农村妇女妇科重症高发</a></li>
<li>[2009-11.27]<a href="http://www.39gd.com/yy/alzx/2721.html">22年雌雄难辨一朝手术变女人</a></li>
<li>[2009-10.24]<a href="http://www.39gd.com/yy/new/2380.html">雷人广告：妇科广告爬上红绿灯枝头</a></li></ul></div>
<div><ul>
<li>[2016-03.04]<a href="http://www.39gd.com/yy/slg/13934.html">治疗输卵管性不孕需要注意什么</a></li>
<li>[2016-02.26]<a href="http://www.39gd.com/yy/zgx/13859.html">子宫不规律出血原因</a></li>
<li>[2016-02.26]<a href="http://www.39gd.com/yy/zgx/13858.html">治疗子宫内膜炎需要多少钱</a></li>
<li>[2016-02.26]<a href="http://www.39gd.com/yy/zgx/13857.html">子宫内膜薄的症状</a></li>
<li>[2016-02.26]<a href="http://www.39gd.com/yy/zgx/13856.html">子宫囊肿如何治疗</a></li>
<li>[2016-02.26]<a href="http://www.39gd.com/yy/zgx/13855.html">子宫松弛怎么治疗</a></li></ul>
<ul>
<li>[2009-10.17]<a href="http://www.39gd.com/yy/anli/1631.html">进行人工授精后的注意事项</a></li>
<li>[2009-10.27]<a href="http://www.39gd.com/yy/byzl/2412.html">什么时候做卵泡监测最好</a></li>
<li>[2009-10.17]<a href="http://www.39gd.com/yy/anli/1633.html">人工授精可以选择生男生女吗</a></li>
<li>[2009-10.27]<a href="http://www.39gd.com/yy/byzl/2411.html">监测卵泡有哪些作用</a></li>
<li>[2009-10.17]<a href="http://www.39gd.com/yy/anli/1629.html">人工授精的机率有多少</a></li>
<li>[2010-08.02]<a href="http://www.39gd.com/yy/anli/4423.html">广州有哪些医院可以做人工受精</a></li></ul></div>
<div><ul>
<li>[2016-02.13]<a href="http://www.39gd.com/yy/ch/13734.html">产后女性的饮食方面需要注意什么？</a></li>
<li>[2016-01.30]<a href="http://www.39gd.com/yy/cwcz/13670.html">广州女子医院四维</a></li>
<li>[2016-01.30]<a href="http://www.39gd.com/yy/cwcz/13667.html">广州女子医院四维预约</a></li>
<li>[2016-01.30]<a href="http://www.39gd.com/yy/cwcz/13665.html">广州女子医院四维彩超怎么样</a></li>
<li>[2016-01.28]<a href="http://www.39gd.com/yy/zb/13656.html">排卵期可以通过哪些方法来计算呢</a></li>
<li>[2016-01.27]<a href="http://www.39gd.com/yy/xs/13652.html">护理新生儿需重视哪些方面的事项</a></li></ul>
<ul>
<li>[2015-09.09]<a href="http://www.39gd.com/yy/cwcz/10052.html">广州女子医院做四维彩超多少钱一次</a></li>
<li>[2010-06.23]<a href="http://www.39gd.com/yy/hyzz/4269.html">性生活后几天可测出怀孕</a></li>
<li>[2010-01.25]<a href="http://www.39gd.com/yy/zq/3157.html">孕妇第一次B超检查是什么时候</a></li>
<li>[2011-01.30]<a href="http://www.39gd.com/yy/zq/5110.html">早孕反应从什么时候开始</a></li>
<li>[2010-11.09]<a href="http://www.39gd.com/yy/zb/4901.html">冬季不适合怀孕，那个季节怀孕最好呢？</a></li>
<li>[2010-01.15]<a href="http://www.39gd.com/yy/zq/3039.html">怀孕初期不能吃什么</a></li></ul></div>
<div><ul>
<li>[2016-03.07]<a href="http://www.39gd.com/yy/pqy/13939.html">盆腔炎会造成哪些危害</a></li>
<li>[2016-02.29]<a href="http://www.39gd.com/yy/yuejing/13926.html">经血黑色是什么原因</a></li>
<li>[2016-02.29]<a href="http://www.39gd.com/yy/rxai/13911.html">生活中要如何预防乳腺癌</a></li>
<li>[2016-03.08]<a href="http://www.39gd.com/yy/gjfd/13941.html">为了预防宫颈肥大女性要做好什么?</a></li>
<li>[2016-03.01]<a href="http://www.39gd.com/yy/fkzx/13928.html">做妇科检查需要注意哪些事情</a></li>
<li>[2016-01.30]<a href="http://www.39gd.com/yy/nxjk/13674.html">广州女子医院生殖科</a></li></ul>
<ul>
<li>[2009-11.24]<a href="http://www.39gd.com/yy/wyy/2592.html">女性外阴部瘙痒是什么原因引起的</a></li>
<li>[2010-03.05]<a href="http://www.39gd.com/yy/yjls/3538.html">月经量少吃什么食物</a></li>
<li>[2010-04.03]<a href="http://www.39gd.com/yy/rxzs/3824.html">乳腺增生不可以吃什么</a></li>
<li>[2010-02.22]<a href="http://www.39gd.com/yy/gjml/3437.html">宫颈糜烂的白带会有哪些异常症状</a></li>
<li>[2016-03.01]<a href="http://www.39gd.com/yy/fkzx/13928.html">做妇科检查需要注意哪些事情</a></li>
<li>[2010-09.16]<a href="http://www.39gd.com/yy/jkcs/4720.html">月经刚完是安全期吗</a></li></ul></div>
<div><ul>
<li>[2016-03.08]<a href="http://www.39gd.com/yy/gwy/13940.html">引起宫外孕的原因是什么</a></li>
<li>[2016-03.04]<a href="http://www.39gd.com/yy/rgyc/13935.html">引产前重要的检查有哪些？</a></li>
<li>[2016-02.27]<a href="http://www.39gd.com/yy/rljc/13882.html">安全期避孕可靠吗？有哪些事情要注意？</a></li>
<li>[2016-02.22]<a href="http://www.39gd.com/yy/Huaiyun/13759.html">人流需要住院吗</a></li>
<li>[2016-02.22]<a href="http://www.39gd.com/yy/Huaiyun/13758.html">做人流要做哪些检查</a></li>
<li>[2016-02.22]<a href="http://www.39gd.com/yy/Huaiyun/13757.html">做人流痛吗</a></li></ul>
<ul>
<li>[2009-12.02]<a href="http://www.39gd.com/yy/byjy/2761.html">体外射精避孕方式安全吗</a></li>
<li>[2010-06.10]<a href="http://www.39gd.com/yy/shtl/4222.html">人流后为什么不能同房</a></li>
<li>[2010-10.22]<a href="http://www.39gd.com/yy/rlsj/4851.html">怀孕几周可以做人流</a></li>
<li>[2010-04.06]<a href="http://www.39gd.com/yy/rljg/3838.html">无痛人流一般花多少钱</a></li>
<li>[2009-10.16]<a href="http://www.39gd.com/yy/zyzc/1501.html">尿检弱阳性是怀孕吗</a></li>
<li>[2010-09.02]<a href="http://www.39gd.com/yy/gwy/4643.html">宫外孕早期症状hcg是多少</a></li></ul></div>
<div><ul>
<li>[2016-02.29]<a href="http://www.39gd.com/yy/zgjl/13910.html">患良性子宫肌瘤会出现哪些症状?</a></li>
<li>[2016-02.26]<a href="http://www.39gd.com/yy/lczl/13860.html">卵巢囊肿严重吗</a></li>
<li>[2016-02.26]<a href="http://www.39gd.com/yy/zgjl/13850.html">微创子宫肌瘤多少钱</a></li>
<li>[2016-02.25]<a href="http://www.39gd.com/yy/zgjl/13829.html">子宫肌瘤的治疗方法</a></li>
<li>[2016-02.25]<a href="http://www.39gd.com/yy/zgjl/13828.html">子宫肌瘤需要手术吗</a></li>
<li>[2016-02.25]<a href="http://www.39gd.com/yy/lczl/13826.html">卵巢囊肿微创手术多少钱</a></li></ul>
<ul>
<li>[2009-10.22]<a href="http://www.39gd.com/yy/qtzl/2310.html">恶性葡萄胎和绒毛膜癌治愈后还能怀孕吗</a></li>
<li>[2009-11.30]<a href="http://www.39gd.com/yy/zgjl/2758.html" 13523 >得了子宫肌瘤怎么办</a></li>
<li>[2010-05.07]<a href="http://www.39gd.com/yy/zgjl/4106.html">子宫肌瘤会影响怀孕吗</a></li>
<li>[2011-05.03]<a href="http://www.39gd.com/yy/zgjl/5518.html">女性小肚子变硬是怎么回事呢</a></li>
<li>[2009-10.22]<a href="http://www.39gd.com/yy/qtzl/2309.html">阴道排液很多是为什么</a></li>
<li>[2009-12.26]<a href="http://www.39gd.com/yy/zgjl/2875.html">女性有子宫肌瘤是否能上环</a></li></ul></div>
<div><ul>
<li>[2016-03.03]<a href="http://www.39gd.com/yy/qtzx/13933.html">子宫小会不会对生育有影响吗?</a></li>
<li>[2016-01.29]<a href="http://www.39gd.com/yy/ydjss/13659.html">分娩后做阴道紧缩术要注意什么</a></li>
<li>[2016-01.12]<a href="http://www.39gd.com/yy/ydjss/13596.html">常见的阴道松弛的原因有哪些</a></li>
<li>[2015-12.29]<a href="http://www.39gd.com/yy/cnm/13539.html">女性做处女膜修复术后应该要多吃什么食物</a></li>
<li>[2015-12.28]<a href="http://www.39gd.com/yy/ydjss/13536.html">阴道松弛会有哪些危害</a></li>
<li>[2015-12.21]<a href="http://www.39gd.com/yy/cnm/13507.html">哪些情况是不能做处女膜修复手术</a></li></ul>
<ul>
<li>[2009-11.03]<a href="http://www.39gd.com/yy/cg/2450.html">我第二次做处女膜“修补”</a></li>
<li>[2009-10.30]<a href="http://www.39gd.com/yy/qtzx/2442.html">阴蒂与女性性能力有关吗</a></li>
<li>[2009-10.31]<a href="http://www.39gd.com/yy/cg/2447.html">“石女”4小时手术重获新“身”(图)</a></li>
<li>[2010-04.03]<a href="http://www.39gd.com/yy/cnm/3827.html">处女膜修复术大概要多少钱</a></li>
<li>[2009-10.31]<a href="http://www.39gd.com/yy/qtzx/2445.html">阴蒂肥大怎么办</a></li>
<li>[2009-10.31]<a href="http://www.39gd.com/yy/qtzx/2443.html">什么是阴毛种植术</a></li></ul></div></div></div></div>

最后是切换代码：

<script type="text/javascript">
$(".slide").slide({ titCell:".bh li", mainCell:".bd", effect:"fold"});
$(".slide2").slide({ titCell:".bh li", mainCell:".bd", effect:"fold"});
</script>

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/30111374/viewspace-2051659/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/30111374/viewspace-2051659/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

简单的切换代码 附控制多个切换方法

简单的切换代码附控制多个切换方法