Products
GG网络技术分享 2025-03-18 16:14 0
在bootstap环境下实现标签页（tab选项卡）效果比较简单，一般有两种方法：一种是用bootstrap提供的数据切换（data-toggle=\"tab\"）功能；一种是用jQuery提供的tab组件show方法。
案例效果如下：
下面看一下实现标签页（tab选项卡）效果两种网页的代码。
使用数据切换（data-toggle=\"tab\"）功能网页tabs.html的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no\">
<title>标签页</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/bootstrap.css\"/>
</head>
<body>
<ul class=\"nav nav-pills\">
<li class=\"active\"><a href=\"#n1\" data-toggle=\"tab\">首页</a></li>
<li><a href=\"#n2\" data-toggle=\"tab\">梦想</a></li>
<li><a href=\"#n3\" data-toggle=\"tab\">爱心</a></li>
<li><a href=\"#n4\" data-toggle=\"tab\">安逸</a></li>
</ul>
<div class=\"tab-content\" style=\"padding:20px;\">
<div class=\"tab-pane active fade in\" id=\"n1\">
<img src=\"img/s1.jpg\"/>
</div>
<div class=\"tab-pane fade\" id=\"n2\">
<img src=\"img/s2.jpg\"/>
</div>
<div class=\"tab-pane fade\" id=\"n3\">
<img src=\"img/s3.jpg\"/>
</div>
<div class=\"tab-pane fade\" id=\"n4\">
<img src=\"img/s4.jpg\"/>
</div>
</div>
<script type=\"text/javascript\" src=\"js/jquery-3.1.1.min.js\"></script>
<script type=\"text/javascript\" src=\"js/bootstrap.min.js\"></script>
</body>
</html>
使用jQuery提供的tab组件show方法网页tabs-1.html的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no\">
<title>标签页JQ版</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/bootstrap.css\"/>
<style type=\"text/css\">
</style>
</head>
<body>
<ul class=\"nav nav-pills\">
<li class=\"active\"><a href=\"#n1\">首页</a></li>
<li><a href=\"#n2\">梦想</a></li>
<li><a href=\"#n3\">爱心</a></li>
<li><a href=\"#n4\">安逸</a></li>
</ul>
<div class=\"tab-content\" style=\"padding:20px;\">
<div class=\"tab-pane active fade in\" id=\"n1\">
<img src=\"img/s1.jpg\"/>
</div>
<div class=\"tab-pane fade\" id=\"n2\">
<img src=\"img/s2.jpg\"/>
</div>
<div class=\"tab-pane fade\" id=\"n3\">
<img src=\"img/s3.jpg\"/>
</div>
<div class=\"tab-pane fade\" id=\"n4\">
<img src=\"img/s4.jpg\"/>
</div>
</div>
<script type=\"text/javascript\" src=\"js/jquery-3.1.1.min.js\"></script>
<script type=\"text/javascript\" src=\"js/bootstrap.min.js\"></script>
<script type=\"text/javascript\">
$(\'.nav a\').on(\'click\',function(){
$(this).tab(\'show\');
});
</script>
</body>
</html>
至此，案例制作完成。
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; } } </div> <script> |
程序的运行效果如下：鼠标点击Tab标签，实现标签变色效果，下边的内容变成相应的标签内容．
以上主要介绍了JavaScript Tab菜单实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下。
Demand feedback
