Saber 酱的抱枕

Fly me to the moon

01/28
2019
软件

QTTabBar 给资源管理器加上标签页

saber 撰写 5条回复 4,377次查看

QTTabBar 给资源管理器加上标签页

以前我用过几年 Cover，它是一个给资源管理器加上标签页的软件，但是后来它变得有广告了，还加了会员登陆之类的功能，我就卸载了。这之后大概快两年了吧，没再用过标签页类软件，但标签页还是挺方便的，去年听说 Windows 10 新版本要加入 Sets 多标签页功能，我还很期待，不料这个功能最后流产了。今天闲来无事，又折腾了下 QTTabBar 这个软件，觉得也挺不错。
Read More →

QTTabBar 给资源管理器加上标签页

10/10
2015
学习

使用jq制作tab选项卡的切换效果

saber 撰写 无回复 2,920次查看

今天做网站要用tab选项卡效果，我写了之后封装成了函数，放上来备用。 

<div class="tabtitle clearfix">
    <a href="" class="active">五星服务</a>
    <a href="">医院环境</a>
    <a href="">先进设备</a>
    <a href="">公益活动</a>
</div>
<div class="tabmain">
    <div class="tabmlist">五星服务</div>
    <div class="tabmlist">医院环境</div>
    <div class="tabmlist">先进设备</div>
    <div class="tabmlist">公益活动</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script>
    function setTab (titlist,mainlist,className) {
        titlist.mouseover(function () {
            mainlist.eq(titlist.index(this)).siblings().hide();
            mainlist.eq(titlist.index(this)).show();
            titlist.eq(titlist.index(this)).addClass(className);
            titlist.eq(titlist.index(this)).siblings().removeClass(className);
        });
        mainlist.eq(0).siblings().hide();
        mainlist.eq(0).show();
    }
    setTab($(".tabtitle a"),$(".tabmlist"),"active");
</script>

如果想要不修改而直接使用代码，要注意元素的层级关系，列表的主体部分和标题部分不要处于同一层级。

事件绑定之后，把内容部分先进行了显示隐藏的处理，就是显示第一个，隐藏其余几个。其实如果css设置的好，没必要这么做。

效果图：

jq tab选项卡

我没有做自动切换功能，上图是手动切换。

使用jq制作tab选项卡的切换效果

08/1
2014
学习

Jq显示隐藏div

saber 撰写 无回复 1,728次查看

多个选项卡的切换（隐藏显示）是网页常见的特效，用jq来做很省事。

首先引入jq，然后封装一个事件，在div中写入onclick="showdome1()"

下面是两个tab切换的：

function showfuwutab2 () {

    $("#dome2").show();

    $("#dome1").hide();

    $("#dome2").css('color','#cd4726');

    $("#dome1").css('color','#fff');

}[/code]

下面是单个按钮切换一个div显示隐藏的：


function showdome1() {

    if($('#dome1').is(':hidden')){

        $("#dome1").show();

    }else{

        $("#dome1").hide();

    }

}[/code]

如果封装的js太长的话可以保存到外部文件。


参考：http://www.phpvar.com/archives/183.html

		
Jq显示隐藏div