Jquery 实现点击tab切换页签

1.我将这个封装城了插件代码如下,你可以独立到一个js文件,然后页面引用下这个js文件:

(function ($) {
    $.fn.extend({
        qmTabs: function () {
            var aTabBodys = $(‘#tabs-body > div‘);
            $(this).children("li").each(function (index) {
                $(this).click(function () {
                    //alert(index);
                    $(this).removeClass().addClass(‘tab-nav-action‘).siblings().removeClass().addClass(‘tab-nav‘);
                    aTabBodys.hide().eq(index).show();
                });
            });
        }
    });
})(jQuery);

2.html页面代码:

<script src="~/Content/js/tab.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#tabs").qmTabs();
    });
</script><div class="tabs">                                <ul id="tabs">                                    <li class="tab-nav-action">最近一个月订单</li>                                    <li class="tab-nav">一个月之前订单</li>                                    <li class="tab-nav">已作废订单</li>                                    <li class="tab-nav">退换货订单</li>                                </ul>                            </div><div id="tabs-body" class="tabs-body">   <div style="display: none"></div>   <div style="display: none"></div>   <div style="display: none"></div></div>

css样式:

.tabs {
    float: left;
    border-left: 1px solid #ccc;
}

    .tabs ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }

        .tabs ul li {
            float: left;
            line-height: 24px;
            margin: 0;
            padding: 2px 20px 0 15px;
        }

.tab-nav {
    border: 1px solid #ccc;
    border-left: 0px;
    cursor: pointer;
}

.tab-nav-action {
    color: #8bb521;
    border-top: 2px solid black;
    border-right: 1px solid #ccc;
    border-bottom: 0px;
    cursor: pointer;
    background-color: white;
}

.tabs-body {
    /*border-bottom: 1px solid #B4C9C6;
        border-left: 1px solid #B4C9C6;
        border-right: 1px solid #B4C9C6;*/
    float: left;
    padding: 5px 0 0;
    width: 100%;
}
 .tab_line {
        border-bottom: 1px solid #dbdbdb;
        height: 30px;
        margin-top: -3px;
        position: relative;
        top: 1px;
        width: 819px;
        z-index: 1;
    }
    /*.tabs-body div {
        padding: 10px;
    }*/
时间: 2024-10-28 15:50:41

Jquery 实现点击tab切换页签的相关文章

使用bootstrap简单制作Tab切换页

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 在点击左侧菜单中的选项时,我希望有Extjs.EasyUI等中类似的tab页签功能,因为这样可以支持多个页面的浏览,有时候我们可能需要同时打开多个页

jQuery带有定时器的tab栏切换

现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务器压力较大,而淘宝的是当鼠标放上去2秒左右,才切换,这样,防止不断的来回切换,这个效果我们需要带定时器来控制就好了. 小强老师今天就以淘宝的tab栏切换,利用jquery定时器来做这个效果. 首先先把html 结构书写如下: <div class="r-hd">        

JQuery实现点击div以外的位置隐藏该div窗口

简单示例代码: <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(document).bind("click&

jQuery实现点击文本框清除内容代码实例

jQuery实现点击文本框清除内容代码实例:本章节介绍一下文本框最简单的一个人性化措施,就是点击文本框的时候能够删除里面的提示文本.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

jquery实现点击页面其他地方隐藏指定元素

jquery实现点击页面其他地方隐藏指定元素:在很多效果中,都有这样的功能,当点击页面的其他地方时,能够隐藏一个指定的元素,例如在模拟实现的select下拉菜单效果中,当下拉菜单出现的时候,我们往往希望当点击页面其他地方的时候,能够隐藏下拉条,下面就通过一个实例单独介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=

jquery实现点击按钮弹出层和点击空白处隐藏层

昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn').find('.assess').unbind().bind('click',function(event){                    //取消事件冒泡                      event.stopPropagation(); if($('.abtnBox').is

基于jQuery鼠标点击弹出登陆框效果

基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type="button" class="one" value="点击我查看效果" /> <div class="box"> <div class="box2"> <div class=&quo

jQuery实现点击单选按钮切换选中状态效果

实现效果:第一次点击单选按钮时选中该按钮,再次点击时取消选中该单选按钮. 关键就是要将单选按钮原来的值保存起来,第二次点击时.如果原来选中则取消,否则选中. 看代码吧,是用jQuery实现的,功能虽小.知识点不少啊..... Js代码   $(document).ready(function(){ var old = null; //用来保存原来的对象 $("input[name='sex']").each(function(){//循环绑定事件 if(this.checked){ o