这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 js 实现选项卡内容切换以及文字折叠和展开效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
1. 选项卡效果预览
2. 源码与简要说明
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- 切换选项卡功能实现
- </title>
- <link rel="stylesheet" href="css/switchTab.css" />
- </head>
- <body>
- <div class="nav-tab">
- <ul class="main-tab" id="nav-tab">
- <li class="active" index="0">
- <a href="#none">
- <p>
- 星期一
- </p>
- <p>
- 11-07
- </p>
- </a>
- </li>
- <li index="1">
- <a href="#none">
- <p>
- 星期二
- </p>
- <p>
- 11-08
- </p>
- </a>
- </li>
- <li index="2">
- <a href="#none">
- <p>
- 星期三
- </p>
- <p>
- 11-09
- </p>
- </a>
- </li>
- <li index="3">
- <a href="#none">
- <p>
- 星期四
- </p>
- <p>
- 11-10
- </p>
- </a>
- </li>
- <li index="4">
- <a href="#none">
- <p>
- 星期五
- </p>
- <p>
- 11-11
- </p>
- </a>
- </li>
- <li index="5">
- <a href="#none">
- <p>
- 星期六
- </p>
- <p>
- 11-12
- </p>
- </a>
- </li>
- <li index="6">
- <a href="#none">
- <p>
- 星期日
- </p>
- <p>
- 11-13
- </p>
- </a>
- </a>
- </li>
- </ul>
- </div>
- <div class="tab-content">
- <div class="table-div" style="display: block;" tab-index="0">
- <table cellpadding="0" cellspacing="0" border="0" class="table">
- <colgroup>
- <col align="left" width="40%" />
- <col align="left" width="30%" />
- <col align="right" width="30%" />
- </colgroup>
- <thead>
- <tr>
- <td>
- 播出频道
- </td>
- <td>
- 时间
- </td>
- <td>
- 节目
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 安徽卫视
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- CCTV
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- 广东卫视
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- 甘肃卫视
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="table-div" style="display: none;" tab-index="0">
- <table cellpadding="0" cellspacing="0" border="0" class="table">
- <colgroup>
- <col align="left" width="40%" />
- <col align="left" width="30%" />
- <col align="right" width="30%" />
- </colgroup>
- <thead>
- <tr>
- <td>
- 播出频道
- </td>
- <td>
- 时间
- </td>
- <td>
- 节目
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 安徽卫视
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- CCTV
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- 广东卫视
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- 甘肃卫视
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="table-div" style="display: none;" tab-index="0">
- <table cellpadding="0" cellspacing="0" border="0" class="table">
- <colgroup>
- <col align="left" width="40%" />
- <col align="left" width="30%" />
- <col align="right" width="30%" />
- </colgroup>
- <thead>
- <tr>
- <td>
- 播出频道
- </td>
- <td>
- 时间
- </td>
- <td>
- 节目
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 安徽卫视
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- CCTV
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- 广东卫视
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- 甘肃卫视
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- 安徽卫视
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- CCTV
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- 广东卫视
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr class="last-no-border">
- <td>
- 甘肃卫视
- </td>
- <td>
- 2016/11/07
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="table-div" style="display: none;" tab-index="1">
- <table cellpadding="0" cellspacing="0" border="0" class="table">
- <thead>
- <tr>
- <td>
- 播出频道
- </td>
- <td>
- 时间
- </td>
- <td>
- 节目
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 安徽卫视
- </td>
- <td>
- 2016/11/08
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- CCTV
- </td>
- <td>
- 2016/11/08
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="table-div" style="display: none;" tab-index="2">
- <table cellpadding="0" cellspacing="0" border="0" class="table">
- <thead>
- <tr>
- <td>
- 播出频道
- </td>
- <td>
- 时间
- </td>
- <td>
- 节目
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 安徽卫视
- </td>
- <td>
- 2016/11/09
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- CCTV
- </td>
- <td>
- 2016/11/09
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="table-div" style="display: none;" tab-index="3">
- <table cellpadding="0" cellspacing="0" border="0" class="table">
- <thead>
- <tr>
- <td>
- 播出频道
- </td>
- <td>
- 时间
- </td>
- <td>
- 节目
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 安徽卫视
- </td>
- <td>
- 2016/11/10
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- CCTV
- </td>
- <td>
- 2016/11/10
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="table-div" style="display: none;" tab-index="4">
- <table cellpadding="0" cellspacing="0" border="0" class="table">
- <thead>
- <tr>
- <td>
- 播出频道
- </td>
- <td>
- 时间
- </td>
- <td>
- 节目
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 安徽卫视
- </td>
- <td>
- 2016/11/11
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- CCTV
- </td>
- <td>
- 2016/11/11
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="table-div" style="display: none;" tab-index="5">
- <table cellpadding="0" cellspacing="0" border="0" class="table">
- <thead>
- <tr>
- <td>
- 播出频道
- </td>
- <td>
- 时间
- </td>
- <td>
- 节目
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 安徽卫视
- </td>
- <td>
- 2016/11/12
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- CCTV
- </td>
- <td>
- 2016/11/12
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="table-div" style="display: none;" tab-index="5">
- <table cellpadding="0" cellspacing="0" border="0" class="table">
- <thead>
- <tr>
- <td>
- 播出频道
- </td>
- <td>
- 时间
- </td>
- <td>
- 节目
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 安徽卫视
- </td>
- <td>
- 2016/11/12
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- CCTV
- </td>
- <td>
- 2016/11/12
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="table-div" style="display: none;" tab-index="6">
- <table cellpadding="0" cellspacing="0" border="0" class="table">
- <thead>
- <tr>
- <td>
- 播出频道
- </td>
- <td>
- 时间
- </td>
- <td>
- 节目
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 安徽卫视
- </td>
- <td>
- 2016/11/13
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- <tr>
- <td>
- CCTV
- </td>
- <td>
- 2016/11/13
- </td>
- <td>
- 天气预报
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="div-buttn btn-show" button-index="0">
- 显示全部
- <i class="c-icon c-icon-bottom">
- </i>
- </div>
- <div class="div-buttn btn-collapse" style="display: none;" button-index="0">
- 折叠
- <i class="c-icon c-icon-top">
- </i>
- </div>
- </div>
- <script type="text/javascript" src="./js/lib/jquery-3.1.1.min.js">
- </script>
- <!--时间:2016-11-09 作者:zhangjiangfeng 描述:选项卡jQuery版本实现 -->
- <!--<script type="text/javascript" src="js/switchTab-jQuery.js"></script>
- <!--时间:2016-11-12 作者:zhangjiangfeng 描述:选项卡原生js版本实现 -->
- <script type="text/javascript" src="js/switchTab-javascript.js">
- </script>
- </body>
- </html>
switchTab.css 选项卡样式小技巧简要说明
对于选项卡未选中时利用边框透明 border-color: rgba(0,0,0,0);;选中后边框顶部颜色 border-top-color 显示,
这一技巧从而减少其选项卡盒子模型的计算
- /**
- * Author Zhangjiangfeng
- * Date 2016/11/9 PM 20:35 night
- * 选项卡样式实现
- */
- html {
- font-family: "微软雅黑";
- font-size: 12px;
- }
- div, ul, li, p, a {
- margin: 0;
- padding: 0;
- }
- .nav-tab {
- width: 565px;
- height: 54px;
- background-color: #fafafa;
- position: relative;
- display: inline-block;
- }
- ul.main-tab {
- list-style: none;
- margin: 0;
- padding: 0;
- height: 100%;
- font-size: 0; /*消除display: inline-block间隙*/
- border-bottom: 1px solid #d9d9d9;
- margin-bottom: -2px;
- }
- ul.main-tab li {
- display: inline-block;
- height: 48px;
- padding-top: 4px;
- border-width: 2px 1px 0;
- border-color: #999;
- border-style: solid;
- border-color: rgba(0,0,0,0);
- _border-color:tomato;
- _filter:chroma(color=#ff6347);
- }
- ul.main-tab li a {
- display: inline-block;
- height: 100%;
- text-decoration: none;
- color: #333;
- }
- ul.main-tab li p {
- font-size: 12px;
- line-height: 20px;
- padding: 0 20px;
- }
- /*利用边框的透明从而减少li盒子计算样式*/
- ul.main-tab li {
- border-width: 2px 1px 0;
- border-top-color: #19A6A6;
- border-left-color: #d9d9d9;
- border-right-color: #d9d9d9;
- border-style: solid;
- border-color: rgba(0,0,0,0);
- }
- /* ul.main-tab li:hover {
- border-width: 2px 1px 0;
- border-top-color: #19A6A6;
- border-left-color: #d9d9d9;
- border-right-color: #d9d9d9;
- border-bottom: #FFFFFF;
- border-style: solid;
- background-color: #FFFFFF;
- }*/
- /*选项卡选中样式*/
- ul.main-tab li.active {
- border-width: 2px 1px 0;
- border-top-color: #19A6A6;
- border-left-color: #d9d9d9;
- border-right-color: #d9d9d9;
- border-bottom: #FFFFFF;
- border-style: solid;
- background-color: #FFFFFF;
- }
- /*选项卡内容样式*/
- .tab-content {
- width: 543px;
- min-height: 250px;
- border: 1px solid #d9d9d9;
- border-top: none;
- padding: 10px;
- position: relative;
- }
- .table {
- width: 100%;
- display: table;
- border-collapse: collapse;
- border: 0;
- }
- .table tr td {
- padding: 10px;
- border-bottom: solid 1px #d9d9d9;
- }
- .table tr.last-no-border td {
- border-bottom: none;
- }
- .div-buttn {
- width: 100%;
- height: 30px;
- cursor: pointer;
- line-height: 30px;
- text-align: center;
- background-color: #fafafa;
- }
- .div-buttn i {
- width: 14px;
- height: 14px;
- margin-left: 5px;
- display: inline-block;
- vertical-align: text-bottom;
- font-style: normal;
- }
- .div-buttn i.c-icon {
- background: url(../img/icons.png) no-repeat 0 0;
- }
- .div-buttn i.c-icon-bottom {
- background-position: -71px -168px;
- }
- .div-buttn i.c-icon-top {
- background-position:-96px -168px
- }
- .close {
- display: none;
- }
switchTab-jQuery/switchTab-javascript 思路简要说明
a. 切换不同选项卡显示对应内容
b. 点击折叠 / 展开按钮时,操作的是哪一选项卡对应的内容
3.switchTab-jQuery.js 动态效果实现
- /*选项卡切换功能借助jQuery实现*/
- $(function() {
- var $navTab = $("#nav-tab"); //选项卡对象
- var $tabCont = $(".tab-content"); //选项卡内容
- var $tabContList = $tabCont.find(".table-div"); //选项卡内容列表
- var $btnShow = $(".btn-show"); //显示全部
- var $btnCollapse = $(".btn-collapse"); //折叠
- //选项卡事件绑定
- $navTab.on("click", "li",
- function() {
- var $that = $(this);
- //获取当前索引值
- var navIndex = $that.attr("index");
- //当前点击li添加active类,同级兄弟节点移除active类
- $that.addClass("active").siblings().removeClass("active");
- //当当前点击选项卡navIndex值与表格列表索引tabIndex值相等时显示,否则隐藏
- $tabContList.each(function(i) {
- var $that = $(this);
- var tabIndex = $that.attr("tab-index"); //表格列表索引
- if (navIndex === tabIndex) {
- $that.show();
- } else {
- $that.hide();
- }
- })
- //设置显示全部与折叠按钮索引值---标识当前选中选项卡
- $btnShow.attr("button-index", navIndex);
- $btnCollapse.attr("button-index", navIndex);
- });
- //显示全部
- $btnShow.on("click",
- function() {
- var $that = $(this);
- var btnIndex = $that.attr("button-index"); //获取当前按钮的索引值
- $that.hide();
- $btnCollapse.show();
- $tabContList.each(function(i) {
- var $that = $(this);
- var tabIndex = $that.attr("tab-index"); //表格列表索引
- if (btnIndex === tabIndex) {
- $that.show();
- }
- })
- })
- //折叠
- $btnCollapse.on("click",
- function() {
- var $that = $(this);
- var btnIndex = $that.attr("button-index"); //获取当前按钮的索引值
- $that.hide();
- $btnShow.show();
- $tabContList.each(function(i) {
- var $that = $(this);
- var tabIndex = $that.attr("tab-index"); //表格列表索引
- if (btnIndex === tabIndex) {
- $that.hide();
- }
- })
- });
- })
3.switchTab-javascript 效果实现
- /*选项卡切换功能js实现*/
- window.onload = function(){
- var oTab = document.getElementById("nav-tab");
- var liArray = oTab.getElementsByTagName("li");
- var tabList = document.getElementsByClassName("table-div");
- var btnShow = document.getElementsByClassName("btn-show");
- var btnCollapse = document.getElementsByClassName("btn-collapse");
- for (var i=0; i<liArray.length; i++) {
- liArray[i].onclick = function(){
- for (var j=0; j<liArray.length; j++) {
- //移除class样式
- liArray[j].className = "";
- }
- //添加class样式
- this.className = "active";
- //获取DOM索引值
- var index = this.getAttribute("index");
- btnShow[0].setAttribute("button-index", index);
- btnCollapse[0].setAttribute("button-index", index);
- //内容切换
- for (var t = 0; t<tabList.length; t++) {
- var tableIndex = tabList[t].getAttribute("tab-index");
- if(index === tableIndex){
- tabList[t].style.display = "block";
- }else{
- tabList[t].style.display = "none";
- }
- }
- }
- }
- //显示全部
- btnShow[0].onclick = function(){
- var btnIndex = this.getAttribute("button-index");
- //表格index与按钮btnIndex
- for (var t = 0; t<tabList.length; t++) {
- var tableIndex = tabList[t].getAttribute("tab-index");
- if(btnIndex === tableIndex){
- tabList[t].style.display = "block";
- }
- }
- this.style.display = "none";
- btnCollapse[0].style.display = "block";
- }
- //折叠
- btnCollapse[0].onclick = function(){
- var btnIndex = this.getAttribute("button-index");
- //表格index与按钮btnIndex
- for (var t = 0; t<tabList.length; t++) {
- var tableIndex = tabList[t].getAttribute("tab-index");
- if(btnIndex === tableIndex){
- tabList[t].style.display = "none";
- }
- }
- this.style.display = "none";
- btnShow[0].style.display = "block";
- }
- }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0630/328776.html