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

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

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

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

锋利的jQuery
锋利的jQuery全书第2版
  • 类型:jQuery大小:194.9 MB格式:PDF作者:单东林 张晓菲 魏
立即下载

Tags:jQuery JS tab 

基于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>

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • jQuery遍历json的实例代码
  • var obj = {status:1,bkmsg:\u6210\u529f,bkdata:[\u5415\u5c1a\u5fd7,1387580400,\u6dfb\u52a0\u8bb0\u5f55]}{status:1,bkmsg:\u6210\u529f,bkdata:[\u5415\u5c1a\u5fd7,1387580400,\u6dfb\u52a0\u8bb0\u5f55]},{status:1,bkmsg:\u6210\u529f,bkdata:[\u5415\u5c1a\u5fd7,1387580400,\u4ec0\u4e48\u4e5f\u6ca1\u6709]} ajax请求: $.ajax({ url: /path/to/file, type: GET, dataType: json, data: {param1: value1}, success: function (obj){ //遍历obj } }) 返回的内容在success的函数里面,所有的遍历操作都是……

  • jQuery与JSONP实现跨域访问的实例方法
  • 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成跨域访问的工作,然后在浏览……

  • 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的9行js轻松实现tab控件 相关电子书
    学习笔记
    网友NO.829891

    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.942207

    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.417312

    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.876484

    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
    >

    电子书 编程教程 PC软件下载 安卓软件下载

    Copyright 2018-2020 xz577.com 码农之家

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

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

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