当前位置:首页 > 站长推荐 > HTML+JS+CSS 实现Tab选项卡

HTML+JS+CSS 实现Tab选项卡

我们经常在网页特效中经常需要使用到Tab选项卡的特效,实现这种特效需要使用HTML、CSS、JS的综合运用。实现Tab选项卡介绍两种方法。

方法一:jQuery UI实现Tab选项卡

jQuery UI一个专门的网页特效的库,其官网是http://jqueryui.com/,在jQuery UI中引进相应的库就可以简单实现Tab选项卡。参考下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs();//点击按钮变换选项卡
    /*鼠标经过变换选项卡    
    $( "#tabs" ).tabs({
      event: "mouseover"
    });
    */
  });
  </script>
 
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">选项卡1</a></li>
    <li><a href="#tabs-2">选项卡2</a></li>
    <li><a href="#tabs-3">选项卡3</a></li>
  </ul>
  <div id="tabs-1">
    <p>当我们拥有自己的技术博客的时候,我们往往会给出一些代码的示例,WordPress 编辑器本身没有添加编程语言代码的功能,我们需要借助一些代码插件来实现 WordPress 添加代码。下面介绍几款流行的WordPress代码插件。</p>
  </div>
  <div id="tabs-2">
    <p>ThinkPHP 中的函数库讲解 ThinkPHP 中的有系统函数库、项目函数库和扩展函数库三种。 ThinkPHP 系统函数库 ThinkPHP 的系统函数库顾名思义这是系统的函数库,是属于ThinkPHP框架本身就自带的,此函数库是必须的。</p>
  </div>
  <div id="tabs-3">
    <p>怎样在wordpress添加文章后,内容部分禁止自动添加p标签呢? 如果使用the_content()本来是默认添加了p标签的,这样有点时候很烦,并不是我们想要的样式,怎样禁止wordpress自动给编辑内容添加p标签呢?有两种方法。</p>
  </div>
</div>
</body>
</html>

其效果图如下所示:
jQuery 实现Tab选项卡图

jQuery UI同时还支持多种样式,你可以调整样式,并下载CSS文件。
使用jQuery UI实现html tab 选项卡的优点是:实现简单、方便、样式美观,多种样式选择,缺点是需要加载相应的库文件,加载文件较大,样式修改不易,自定义样式不是很方便。

自定义css+js 实现html tab 选项卡

html tab选项卡的原理就是一个tab按钮对应一个内容,我们需要显示当前选项卡对应的内容,而隐藏其他选项卡的内容,参考以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html xmlns="">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <meta name="roots" content="" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <title></title>
 <style type="text/css">
	body{font:"宋体";font-size:12px;}
	a:link,a:visited{font-size:12px;color:#666;text-decoration:none;}
	a:hover{color:#ff0000;text-decoration:underline;}
	#Tab{margin:0 auto;width:220px;border:1px solid #BCE2F3;}
	.Menubox{height:28px;border-bottom:1px solid #64B8E4;background:#E4F2FB;}
	.Menubox ul{list-style:none;margin:7px 40px;padding:0;position:absolute;}
	.Menubox ul li{float:left;background:#64B8E4;line-height:20px;display:block;cursor:pointer;width:65px;text-align:center;color:#fff;font-weight:bold;border-top:1px solid #64B8E4;border-left:1px solid #64B8E4;border-right:1px solid #64B8E4;}
	.Menubox ul li.hover{background:#fff;border-bottom:1px solid #fff;color:#147AB8;}
	.Contentbox{clear:both;margin-top:0px;border-top:none;height:181px;padding-top:8px;height:100%;}
	.Contentbox ul{list-style:none;margin:7px;padding:0;}
	.Contentbox ul li{line-height:24px;border-bottom:1px dotted #ccc;}
 </style>
 <script>
	<!--
	function setTab(name,cursel,n){
	for(i=1;i<=n;i++){
	var menu=document.getElementById(name+i);
	var con=document.getElementById("con_"+name+"_"+i);
	menu.className=i==cursel?"hover":"";
	con.style.display=i==cursel?"block":"none";
	}
	}
	//-->
 </script>
</head>
<body>
<br><br>
<div id="Tab">
  <div class="Menubox">
    <ul>
      <li id="menu1" onmouseover="setTab('menu',1,2)" class="hover">前台讲解</li>
      <li id="menu2" onmouseover="setTab('menu',2,2)" >PHP讲解</li>
    </ul>
  </div>
  <div class="Contentbox"> 
    <div id="con_menu_1" class="hover">
      <ul>
        <li>·<a href="http://www.zhidao91.com/jquery-get-browser-size/">JQuery 获取浏览器窗口的高度和宽度讲解</a></li>
        <li>·<a href="http://www.zhidao91.com/wordpress-code-hignlighter/">WordPress 代码插件介绍</a></li>
        <li>·<a href="http://www.zhidao91.com/thinkphp-tutorial-functions/">ThinkPHP 新手入门教程(五)之函数库讲解</a></li>
        <li>·<a href="http://www.zhidao91.com/wordpress-function-to-automatically-add-content-p-tag-wpautop/">WordPress中禁止给文章(post)内容(content)自动加上p标签</a></li>
        <li>·<a href="http://www.zhidao91.com/thinkphp-tutorial-config/">ThinkPHP 新手入门教程(五)之配置</a></li>
      </ul>
    </div>
    <div id="con_menu_2" style="display:none">
      <ul>
        <li>·<a href="http://www.zhidao91.com/asplianjiemssql/">ASP.NET C# 连接MSSQL数据库 详细图解</a></li>
        <li>·<a href="http://www.zhidao91.com/php-introduce/">PHP 简介</a></li>
        <li>·<a href="http://www.zhidao91.com/php-includes/">PHP Include 文件教程讲解</a></li>
        <li>·<a href="http://www.zhidao91.com/php-ref-string/">PHP 字符串</a></li>
        <li>·<a href="http://www.zhidao91.com/baiduseopaiminghejingjia/">百度seo排名和百度竞价你真正了解吗</a></li>
        <li>·<a href="http://www.zhidao91.com/wanpandajiansvn/">教你使用网盘搭建SVN</a></li>
        <li>·<a href="http://www.zhidao91.com/php-functions/">PHP 函数讲解</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

效果图如下所示:
html tab 选项卡简单实现

  • << JQuery 获取浏览器窗口的高度和宽度讲解
  • 自定义 html select下拉选择样式讲解 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/html-tab-select-button/

    相关文章 近期热评 最新文章

    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。