可打开可关闭的选项卡,单纯无污染,改改样式就能用

所属分类:媒体-Tabs

 27295  279  查看评论 (3)
分享到微信朋友圈
X
可打开可关闭的选项卡,单纯无污染,改改样式就能用 ie兼容6

之前在JQ库找没找到可关闭的,不想用JQeasyUI,于是自己琢磨做了个。简单的可关闭选项卡。点击链接出来iframe,可多次点击,可切换,可关闭。改改样式就成了JQeasyui;

新手小白,勿喷,求大神指点。

$(function() {
    var click = $('#div2 a');
    function add(Name) {
        var add_li = $('<li><a class="now"><span>' + Name + '</span><span>×</span></a></li>');
        var add_ifame = $('<iframe name="' + Name + '" src="#"></iframe>');
        $('#div3 iframe').hide();
        $('.uu').append(add_li);
        $('#div3').append(add_ifame);
    }
    click.click(function() {
        var texts = $(this).text();
        var show1a = $('#div1 ul li a span:first-child');
        var nowgeshu = $('.uu li').length;
        for (var i = 0; i < show1a.length; i++) {
            if (show1a.eq(i).text() == texts) {
                alert('您已打开了一个相同的标签页!') return false;
            }
        }
        if (nowgeshu < 8) {
            $(this).attr('target', texts);
            $('.uu li a').removeClass('now');
            add(texts);
        } else if (nowgeshu == 8) {
            alert('您已打开了8个标签。请关闭部分标签后再打开新标签!');
            return false;
        }
    }) $('#div1').on('click', 'ul li a span:last-child',
    function(event) {
        if ($(this).parent().hasClass('now')) {
            $('#div1 ul li a').eq($('#div1 ul li').length - 2).addClass('now');
        }
        var index = $('#div1 ul li').index($(this).parent().parent());
        $(this).parent().parent().remove();
        $('#div3 iframe').eq(index).remove();
        if ($('#div3 iframe:visible').length == 0) {
            $('#div3 iframe:last-child').show();
        }
        event.stopPropagation();
    }) $('#div1').on('click', 'ul li a',
    function() {
        if ($(this).hasClass('now')) {
            return false;
        } else {
            $(this).addClass('now').parent().siblings().children().removeClass('now');
            var index = $('#div1 ul li').index($(this).parent());
            $('#div3 iframe').hide().eq(index).show();
        }
    })
})


相关插件-Tabs

jQueryBootstrap个性化响应式Tab

功能的话是可以点击切换的,要想有梯形的样子的话只是兼容ie10以上,或者可以使用背景图片达到相应效果
  Tabs
 21436  263

移动可滑动切换tab选项卡

移动端头部任意多个滑动切换
  Tabs
 65517  439

淡入淡出效果的TAB标签

淡入淡出效果的TAB标签,兼容所有浏览器。
  Tabs
 33919  243

js仿660网站宽屏图片选项卡切换代码

js仿660网站宽屏图片选项卡切换代码
  Tabs
 20144  263

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    突丿隐 0
    2016/7/3 9:07:40
    大神 能给个联系方式吗?? 有点不明白的想向您请教 回复
    追忆 0
    2016/5/24 10:05:36
    刚下了你的插件,可以给一个你的联系方式吗,有一个问题想问问你 回复
    西瓜 0
    2016/4/21 16:04:58
    iframe高度怎么才能自适应? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复