js鼠标滑过标签选项卡切换代码



91 362 121



特效描述:鼠标滑过标签 选项卡切换,医院美容网站模板界面设计html下载

代码结构

1. 引入CSS

<link href="style/index.css" rel="stylesheet" type="text/css">

2. HTML代码

<div class="i_zxme">
	<div class="i_zxmel">
		<div class="i_zxmelt"><a href="#">整形美容</a></div>
		<div class="i_zxmelc">
			<div class="i_zxmelc1">
				<ul>
					<li id="two1" onmouseover="setContentTab('two',1,9)" class="hover"><a href="#">胸部整形</a></li>
					<li id="two2" onmouseover="setContentTab('two',2,9)"><a href="#">鼻部整形</a></li>
					<li id="two3" onmouseover="setContentTab('two',3,9)"><a href="#">眼部整形</a></li>
					<li id="two4" onmouseover="setContentTab('two',4,9)"><a href="#">颌面整形</a></li>
					<li id="two5" onmouseover="setContentTab('two',5,9)"><a href="#">耳部整形</a></li>
					<li id="two6" onmouseover="setContentTab('two',6,9)"><a href="#">口唇整形</a></li>
					<li id="two7" onmouseover="setContentTab('two',7,9)"><a href="#">下巴整形</a></li>
					<li id="two8" onmouseover="setContentTab('two',8,9)"><a href="#">吸脂整形</a></li>
					<li id="two9" onmouseover="setContentTab('two',9,9)"><a href="#">私密整形</a></li>
				</ul>
			</div><!--i_zxmelc1-->
			<div class="i_zxmelc3">
				<div id="con_two_1" style="display: block;">
					<div class="i_zxmelc2"><a href="#"><img src=" images/zx_01.jpg"></a></div><!--i_zxmelc2-->
					<div class="i_zxmelc3d">
						<div class="i_zxmelc31">
							<p><a href="#">胸部一个大一个小自体抽脂隆胸要多少钱</a></p>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#">高耸的胸部对于任何人都具有莫大的吸引力,每一个女性都对自己的胸部非常重视,而拥有美丽、丰满的胸部能让我们更具魅...[详细]</a>
						</div><!--i_zxmelc31-->
						<div class="i_zxmelc32">
							<ul>
								<li>·<a href="#">胸部一个大一个小自体抽脂隆胸要多少钱</a></li>
								<li>·<a href="#">自体隆胸是不是长期要去抽脂肪</a></li>
								<li>·<a href="#">深圳做完假体隆胸后手感好吗</a></li>
								<li>·<a href="">假体隆胸术后消肿时间需要多长</a></li>
							</ul>
						</div><!--i_zxmelc32-->
					</div> <!--i_zxmelc3d-->
				</div><!--con_one5_1-->
				<div id="con_two_2" style="display: none;">
					<div class="i_zxmelc2"><a href="#"><img src=" images/zx_02.jpg"></a></div>
					<div class="i_zxmelc3d">
						<div class="i_zxmelc31">
							<p><a href="#">注射隆鼻后还可以做假体隆鼻吗</a></p>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#">高挺的鼻梁是很多人十分向往的形象,但是整体说来亚洲人种的通病就是鼻梁太塌,没有立体感。隆鼻手术可以改善这一烦恼...[详细]</a>
						</div><!--i_zxmelc31 -->
						<div class="i_zxmelc32">
							<ul>
								<li>·<a href="#">注射隆鼻后还可以做假体隆鼻吗</a></li>
								<li>·<a href="#">深圳做鼻子整形大概多少钱呢</a></li>
								<li>·<a href="#">深圳做隆鼻术有怎样的标准呢</a></li>
								<li>·<a href="#">深圳做隆鼻有什么方法可用</a></li>
							</ul>
						</div><!-- i_zxmelc32-->
					</div> <!--i_zxmelc3d-->
				</div><!--con_one5_2-->
				<div id="con_two_3" style="display: none;">
					<div class="i_zxmelc2"><a href="#"><img src=" images/zx_03.jpg"></a></div>
					<div class="i_zxmelc3d">
						<div class="i_zxmelc31">
							<p><a href="#">怎样割双眼皮才不会留疤呢</a></p>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#">相信所有人都知道做手术要是护理不好的话是很容易留下疤痕的,女孩子在生活中整容割双眼皮护理不好同样会留下疤痕,女...[详细]</a>
						</div>
						<div class="i_zxmelc32">
							<ul>
								<li>·<a href="#">怎样割双眼皮才不会留疤呢</a></li>
								<li>·<a href="#">深圳做双眼皮手术价格贵吗</a></li>
								<li>·<a href="#">深圳切开双眼皮手术危险吗</a></li>
								<li>·<a href="#">深圳切开双眼皮效果好不好啊</a></li>
							</ul>
						</div><!-- i_zxmelc32-->
					</div> <!--i_zxmelc3d-->
				</div><!--con_one5_3-->
				<div id="con_two_4" style="display: none;">
					<div class="i_zxmelc2"><a href=""><img src=" images/zx_04.jpg"></a></div>
					<div class="i_zxmelc3d">
						<div class="i_zxmelc31">
							<p><a href="#">下颌角修复的效果怎么样</a></p>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#">下颌角修复手术能够帮助我们修复不理想的下颌角,还能有效改善脸型。很多人在进行下颌角修复手术的时候不知道效果怎么...[详细]</a>
						</div>
						<div class="i_zxmelc32">
							<ul>
								<li>·<a href="#">下颌角修复的效果怎么样</a></li>
								<li>·<a href="#">做下颌角整形修复手术的注意事项</a></li>
								<li>·<a href="#">下颌角整形失败修复术怎么修复</a></li>
								<li>·<a href="#">深圳整形医院瘦脸方法多吗</a></li>
							</ul>
						</div><!-- i_zxmelc32-->
					</div> <!--i_zxmelc3d-->
				</div><!--con_one5_4-->
				<div id="con_two_5" style="display: none;">
					<div class="i_zxmelc2"><a href="#"><img src=" images/zx_05.jpg"></a></div>
					<div class="i_zxmelc3d">
						<div class="i_zxmelc31">
							<p><a href="#">深圳哪家医院对婴儿小耳畸形治疗最好</a></p>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#">一个人一旦身体出了问题,本能反应就是去医院进行检查治疗。所以对于出现小耳畸形的问题,大家第一时间就是要找好的医...[详细]</a>
						</div>
						<div class="i_zxmelc32">
							<ul>
								<li>·<a href="#">深圳哪家医院对婴儿小耳畸形治疗最好</a></li>
								<li>·<a href="#">深圳做招风耳手术方法好吗</a></li>
								<li>·<a href="#">招风耳手术后反弹</a></li>
								<li>·<a href="#">附耳切除会不会留下疤痕 影响听力吗</a></li>
							</ul>
						</div><!-- i_zxmelc32-->
					</div>  <!--i_zxmelc3d--> 
				</div><!--con_one5_5-->
				<div id="con_two_6" style="display: none;">
					<div class="i_zxmelc2"><a href="#"><img src=" images/zx_06.jpg"></a></div>
					<div class="i_zxmelc3d">
						<div class="i_zxmelc31">
							<p><a href="#">深圳做厚唇改薄手术痛不痛</a></p>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#">有些人觉得厚厚的嘴唇不好看不性感,想通过手术的方法来改善厚唇。厚唇变薄术就是目前最常用的方法。不少求美者是比较...[详细]</a>
						</div>
						<div class="i_zxmelc32">
							<ul>
								<li>·<a href="#">深圳做厚唇改薄手术痛不痛</a></li>
								<li>·<a href="#">深圳厚唇改薄术后会不会留疤</a></li>
								<li>·<a href="#">深圳厚唇改薄术后多久能够恢复?</a></li>
								<li>·<a href="#">深圳厚唇改薄术存在副作用吗</a></li>
							</ul>
						</div><!-- i_zxmelc32-->
					</div>  <!--i_zxmelc3d--> 
				</div><!--con_one5_6-->
				<div id="con_two_7" style="display: none;">
					<div class="i_zxmelc2"><a href="#"><img src=" images/zx_07.jpg"></a></div>
					<div class="i_zxmelc3d">
						<div class="i_zxmelc31">
							<p><a href="#">硅胶假体隆下巴安全吗</a></p>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#">下巴扁平或者短小是众多爱美者选择做下巴整形手术的手术方式,硅胶因为价格便宜,效果好而被广泛用来隆胸、隆鼻和隆下...[详细]</a>
						</div>
						<div class="i_zxmelc32">
							<ul>
								<li>·<a href="#">硅胶假体隆下巴安全吗</a></li>
								<li>·<a href="#">隆下巴手术哪种方法效果最好</a></li>
								<li>·<a href="#">深圳隆下巴假体能不能取出</a></li>
								<li>·<a href="#">深圳玻尿酸隆下巴一般需要多久才能够定型呢</a></li>
							</ul>
						</div><!-- i_zxmelc32-->
					</div>  <!--i_zxmelc3d--> 
				</div><!--con_one5_7-->
				<div id="con_two_8" style="display: none;">
					<div class="i_zxmelc2"><a href="#"><img src=" images/zx_08.jpg"></a></div>
					<div class="i_zxmelc3d">
						<div class="i_zxmelc31">
							<p><a href="#">生完宝宝后可以抽脂减肥吗</a></p>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#">每个在生产完之后的妈妈们,身材都会出现大幅度的走样的情况,这对于生产前和生产后完全不一样身材的辣妈们来说是一件...[详细]</a>
						</div>
						<div class="i_zxmelc32">
							<ul>
								<li>·<a href="#">生完宝宝后可以抽脂减肥吗</a></li>
								<li>·<a href="#">抽脂减肥会不会危害身体健康</a></li>
								<li>·<a href="#">腿部抽脂能快速瘦腿吗</a></li>
								<li>·<a href="#">大腿抽脂塑形一般多少钱</a></li>
							</ul>
						</div><!-- i_zxmelc32-->
					</div>   <!--i_zxmelc3d--> 
				</div><!--con_one5_8-->
				<div id="con_two_9" style="display: none;">
					<div class="i_zxmelc2"><a name="121mini" href="#"><img src=" images/zx_07.jpg"></a></div>
					<div class="i_zxmelc3d">
						<div class="i_zxmelc31">
							<p><a href="#">深圳激光无创阴道紧缩术维持多久</a></p>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#">深圳激光无创阴道紧缩术维持多久?阴道缩紧术就是针对女性各种原因引起的阴道松弛而设计的一种妇科整形手术....[详细]</a>
						</div>
						<div class="i_zxmelc32">
							<ul>
								<li>·<a href="#">深圳激光无创阴道紧缩术维持多久</a></li>
								<li>·<a href="#">深圳女性阴道松弛有办法改善吗</a></li>
								<li>·<a href="#">深圳激光无创阴道紧缩术术前注意什么</a></li>
								<li>·<a href="#">德国铒激光阴道紧缩术价格是多少</a></li>
							</ul>
						</div><!-- i_zxmelc32-->
					</div>   <!--i_zxmelc3d--> 
				</div><!--con_one5_9-->
			</div><!--i_zxmelc3-->
		</div><!--i_zxmelc-->
	</div><!--i_zxmel-->
	<div class="i_zxmer">
		<ul>
			<li><a href="/"><img _src="#images/index/in-lhs.jpg" src=" images/in-lhs.jpg"></a></li>
		</ul>
	</div><!--i_zxmer-->
</div><!--i_zxme全局-->
<div class="xiamgmu">
	<ul>
    	<li><a href="#">韩式隆胸</a></li>
        <li><a href="#">脂肪移植</a></li>
        <li><a href="#">副乳切除</a></li>
        <li><a href="#">乳房下垂</a></li>
        <li><a href="#">活细胞丰胸</a></li>
        <li><a href="#">韩式隆鼻</a></li>
        <li><a href="#">全鼻整形</a></li>
        <li><a href="#">鼻尖塑形</a></li>
        <li><a href="#">鼻延长术</a></li>
        <li><a href="#">歪鼻整形</a></li>
        <li><a href="#">韩式三点</a></li>
        <li><a href="#">埋线手术</a></li>
        <li><a href="#">开外眼角</a></li>
        <li><a href="#">祛除眼袋</a></li>
        <li><a href="#">V脸成型</a></li>
        <li><a href="#">丰面颊</a></li>
        <li><a href="#">隆下巴</a></li>
        <li><a href="#">大腿吸脂</a></li>
        <li><a href="#">腰腹吸脂</a></li>
        <li><a href="#">更多&gt;&gt;</a></li>
    </ul>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 收缩菜单 收缩导航 右键菜单 滚动导航菜单 滚动菜单 滚动导航 导航切换 菜单切换 滑动导航菜单 滑动导航 滑动菜单 浮动菜单 浮动导航 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动选项卡 滑动切换 滚动切换 滚动条切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 其他 滑动选项卡 滑动切换 固定导航 固定菜单 选项卡自动切换 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到