saber酱的抱枕

Fly me to the moon

01/28
02:36
软件

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

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

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

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

10/10
08:00
学习

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

今天做网站要用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
22:45
学习

Jq显示隐藏div

多个选项卡的切换(隐藏显示)是网页常见的特效,用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