当前位置:首页 > jQuery技术文章 > 基于jquery的9行js轻松实现tab控件示例

基于jquery的9行js轻松实现tab控件实例详解

  • 发布时间:
  • 作者:码农之家原创
  • 点击:193

这篇文章主要知识点是关于jquery、js、tab、jQuery zepto.js简单实现tab切换的代码 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

锋利的jQuery

《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目

查看详情

基于jquery的9行js轻松实现tab控件示例

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/**
* 考虑到tab和pane有可能被动态的添加和删除,
* 所以每次都废点时间去查找先前被激活的tab
*/
var tab = function(tabId,activeId){
$("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){
$("#"+$("#"+activeId).attr("tar")).css("display","none");
$("#"+activeId).removeAttr("id");

$(this).attr("id",activeId);
$("#"+$(this).attr("tar")).css("display","block");
});
};
</script>
</head>
<style>
li{
border:1px solid #b5e2f3;
border-bottom:0px;
float:left;
width:100px;
height:25px;
margin:0 7px;
background:#F1FEF3;
padding:9px 0 0 0;
text-align:center;
color:#33a3dc;
cursor:pointer;
}
ul{
width:800;
height:36px;
border-bottom:1px solid #b5e2f3;
}
#selected{
background:#FFF!important;
border-bottom:2px solid #FFF!important;
}
ul{margin:-1px;}
#cate1,#cate2, #cate3, #cate4, #cate5{
clear:both;
height:300px;
background:#FFFFFF;
width:800px;
height:100px;
padding:25px;
border:1px solid #b5e2f3;
}
</style>
<body>
<div id="tab">
<ul>
<li tar="cate1" id="selected">1</li>
<li tar="cate2">2</li>
<li tar="cate3">3</li>
<li tar="cate4">4</li>
</ul>
</div>
<div>
<div id="cate1" >
1
</div>
<div id="cate2" >
2
</div>
<div id="cate3" >
3
</div>
<div id="cate4" >
4
</div>
</div>
</body>
<script>
tab("tab","selected");
</script>
</html>

jQuery zepto.js简单实现tab切换的代码

老规矩,先贴代码

<script>
  $(function(){
    window.onload = function()
    {
      var $li = $('.taocan-title li');
      var $ul = $('.taocan-content .con110');
            
      $li.mouseover(function(){
        var $this = $(this);
        var $t = $this.index();
        $li.removeClass();
        $this.addClass('active');
        $ul.css('display','none');
        $ul.eq($t).css('display','block');
      })
    }
  });
</script>

以上所述就是本文的全部内容了,希望大家能够喜欢。

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到jquery幻灯片效果实例代码、 JQuery循环滚动文字图片实、 怎样处理jQuery EasyUI 已打开、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jquery delay()知识点详解

下一篇:jquery实现鼠标拖动效果的代码

展开 +

收起 -

jquery的9行js轻松实现tab控件 相关内容
jQuery遍历json的实例代码

这篇文章主要介绍了jQuery遍历json的方法的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下

查看详情
时间: 19-12-17
jQuery与JSONP实现跨域访问的实例方法

本篇文章主要是对使用jQuery与JSONP轻松解决跨域访问的问题进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助

查看详情
时间: 19-11-20
jQuery zepto.js简单实现tab切换的代码

这篇文章主要介绍了jQuery插件zepto.js简单实现tab切换的代码,十分的简洁,有需要的小伙伴可以参考下

查看详情
时间: 19-09-24
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战 查看详情
Bootstrap与jQuery UI框架设计

随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

查看详情
jQuery实战从入门到精通

本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

查看详情
jQuery EasyUI开发指南

使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

查看详情
jQuery实战

jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外

查看详情
Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

本书是著名前端开发大牛阮晓龙老师爽作,HTML5、CSS3、jQuery、AJAX一站搞定,一本真正好学、实用又精彩的书,讲述了用HTML5 CSS3设计构建网站的必备知识,欢迎下载

查看详情
jQuery实战案例精粹

jQuery实战案例精粹 从Web开发的实际应用角度出发,结合当下热门的 jQuery插件技术,深入浅出地介绍了 jQuery高性能开发的技巧,是前端开发、设计人员的绝佳选择。 本书共 22章,介绍了 jQuer

查看详情
jquery的9行js轻松实现tab控件 学习笔记
网友NO.964899

jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)

本文实例讲述了jQuery购物车插件jsorder用法。分享给大家供大家参考,具体如下: !DOCTYPE htmlhtmlheadmeta http-equiv="Content-Type" content="text/html; charset=GB18030"/title/titlescript type="text/javascript" src="../js/jquery-1.9.1.min.js" /scriptlink href="./demo.css" rel="stylesheet"/link href="../css/order.css" rel="stylesheet"/script type="text/javascript" src="../js/cookie.js" /scriptscript type="text/javascript" src="../js/jsorder.1.1.js" /script/headbody h1JSORDER 案例/h1 tabletrtd colspan="3" align="left"案例一:我的菜单(点击菜名即可加入菜单)/td/trtr td class="jsorderadd" id="80001" productid="80001" price="12" jsordername="红烧豆腐"红烧豆腐 12元/td td class="jsorderadd" id="80002" productid="80002" price="32" jsordername="毛血旺"毛血旺 32元/td td class="jsorderadd" id="80003" productid="80003" price="18" jsordername="套餐:京酱肉丝+2米饭 18元"套餐:京酱肉丝+2米饭 18元/td/tr/table div id="resul……

网友NO.907040

jQuery zepto.js简单实现tab切换的代码

老规矩,先贴代码 script $(function(){ window.onload = function() { var $li = $(.taocan-title li); var $ul = $(.taocan-content .con110); $li.mouseover(function(){ var $this = $(this); var $t = $this.index(); $li.removeClass(); $this.addClass(active); $ul.css(display,none); $ul.eq($t).css(display,block); }) } });/script 以上所述就是本文的全部内容了,希望大家能够喜欢。 ……

网友NO.925332

JS/jQuery实现超简单的Table表格添加,删除行功能示例

本文实例讲述了JS/jQuery实现超简单的Table表格添加,删除行功能。分享给大家供大家参考,具体如下: 最近需要表格添加删除行,添加行简单,删除行就有点儿懵逼了,于是网上找实例,功夫不负有心人,终于让我找到了,下面的是代码,大家觉得可以,记得点赞哦!!!谢谢! 需要的拿去,转载请在明显的位置标注出出处!!! htmlhead titletable添加/删除行/title/headbodytable id="testTbl" border=1 tr td性别/td td姓名/td td年龄/td /tr tr td select name="a" option value="男"男/option option value="女"女/option /select /td td input type="text" name="b" /td td input type="text" name="c" /td /tr/tableinput type="button" name="Submit2" value="添加" onclick="addRow()"scriptfunction addRow(){ //添加行 var newTr = testTbl.insertRow(); //添加列 var newTd0 = newTr.insertCell(); var newTd1 = newTr.insertCell(); var newTd2 = newTr.insertCell(); var newTd3 = newTr.insertCell(); //设置列内容和属性……

网友NO.805787

JS拖动选择table里的单元格完整实例【基于jQuery】

本文实例讲述了JS拖动选择table里的单元格。分享给大家供大家参考,具体如下: 用JS 实现类似Excel里面动态选择单元格的例子,从网上得到的例子,先记录在这里,以后参考用。 htmlheadmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titlewww.jb51.net JS拖动选择table里的单元格/title script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"/script style .table-container { width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; background-color:white; } table { border: 0; border-collapse: collapse; } table td, table th { border: 1px solid #999; padding: .5em 1em; } /*添加IOS下滚动条 */ .table-container::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; } .table-container::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3); } /*对齐*/ .table-time div { text-align: center; min-width: 104px; } .table-time, tr……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757