JavaScript Tab菜单实现过程解析代码讲解

Tab选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换、滑动切换、延迟切换、自动切换等多种效果代码如下<!

Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换、滑动切换、延迟切换、自动切换等多种效果

代码如下

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>tab</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.current{
background-color: darkgray;
color: yellow;
width: 50px;
height: 30px;
line-height: 30px;
float: left;

}
.top{
float: left;
width: 50px;
height: 30px;
line-height: 30px;
}
#topMenu{
width: 400px;
height: 30px;
background-color: aquamarine;
margin-left: 400px;
float: left;

}
#bottomMenu{
clear: both;
float: left;
width: 400px;
height: 400px;
margin-left: 400px;
background-color: chocolate;
}
.hide{
display: none;
}
.current-content{
color: blue;
font-size: 50px;
}
</style>
<script src=”http://code.jquery.com/jquery-3.3.1.min.js”></script>
</head>
<body>
<div id=”topMenu”>
<div xxx=”c1″ class=”top current” onclick=”tab(this)”>menu1</div>
<div xxx=”c2″ class=”top” onclick=”tab(this)”>menu2</div>
<div xxx=”c3″ class=”top” onclick=”tab(this)”>menu3</div>

</div>
<div id=”bottomMenu”>
<div id=”c1″ class=”current-content”>content1</div>
<div id=”c2″ class=”hide”>content2</div>
<div id=”c3″ class=”hide”>content3</div>
</div>

<script>
function tab(self){
$(self).addClass(“current”);
$(self).siblings().removeClass(“current”);
var s=$(self).attr(“xxx”);
$(“#”+s).removeClass(“hide”);
$(“#”+s).addClass(“current-content”);
$(“#”+s).siblings().addClass(“hide”);
$(“#”+s).siblings().removeClass(“current-content”);
}
</script>
</body>
</html>

程序的运行效果如下:鼠标点击Tab标签,实现标签变色效果,下边的内容变成相应的标签内容.

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

以上主要介绍了JavaScript Tab菜单实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下。


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/7005.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注