代码之家 › 专栏 › 技术社区 › AbeAlpha

addclass和removecalass jsfiddle的问题〔已关闭〕

removeclass addclass iframe css jquery

-4

AbeAlpha · 技术社区 · 10 年前

我正在编写第一个隐藏iframe的脚本,并用jquery addclass和removecalass显示它。我有这个,但加载一些iframe时遇到一些问题。

有人可以检查js是否正确吗?

$(document).ready(function () {

    $("#dvc-aut").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-spl dvc-tap dvc-tal");
    });
    $("#dvc-pho").click(function () {
        $(".dvc-aut").removeClass("dvc-spp dvc-spl dvc-tap dvc-tal").addClass("dvc-pho");
    });
    $("#dvc-spp").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spl dvc-tap dvc-tal").addClass("dvc-spp");
    });
    $("#dvc-spl").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-tap dvc-tal").addClass("dvc-spl");
    });
    $("#dvc-tap").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-spl dvc-tal").addClass("dvc-tap");
    });
    $("#dvc-tal").click(function () {
        $(".dvc-aut").removeClass("dvc-pho dvc-spp dvc-spl dvc-tap").addClass("dvc-tal");
    });
});

.div-dvc {
    border: 0px;
    display:inline;
    position:fixed;
    top:0;
}
.btndvc {
    vertical-align: middle;
    border-radius:10px;
    border:0px solid;
    width:35px;
    height:35px;
    background:#A4A4A4;
    z-index:2;
}
.dvc-table {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    z-index:1;
}
.dvc-aut {
    display:none;
}
.dvc-pho {
    border-image-slice: 61 24 132 25;
    border-image-width: 61px 24px 132px 25px;
    border-image-outset: 59px 22px 130px 23px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i62.tinypic.com/2qddiwy.png");
    width:240px;
    height:320px;
    display:inherit;
}
.dvc-spp {
    border-image-slice: 122 21 125 22;
    border-image-width: 122px 21px 125px 22px;
    border-image-outset: 120px 19px 123px 20px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i62.tinypic.com/1zztlj.png");
    width:320px;
    height:480px;
    display:inherit;
}
.dvc-spl {
    border-image-slice: 21 122 22 125;
    border-image-width:21px 122px 22px 125px;
    border-image-outset: 19px 120px 20px 123px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i61.tinypic.com/2cxszrl.png");
    width:480px;
    height:320px;
    display:inherit;
}
.dvc-tap {
    border-image-slice: 114 96 114 96;
    border-image-width: 114px 96px 114px 96px;
    border-image-outset: 112px 94px 112px 94px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i58.tinypic.com/fwq4bl.png");
    width:767px;
    height:1024px;
    display:inherit;
}
.dvc-tal {
    border-image-slice: 96 114 96 114;
    border-image-width: 96px 114px 96px 114px;
    border-image-outset: 94px 112px 94px 112px;
    border-image-repeat: stretch stretch;
    border-image-source: url("http://i62.tinypic.com/2nc2ag9.png");
    width:1024px;
    height:767px;
    display:inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></script>

<div class="div-dvc">
    <button id="dvc-aut" class="btndvc fa fa-desktop" title="Auto"></button>
    <button id="dvc-pho" class="btndvc fa fa-mobile " title="Old Phone"></button>
    <button id="dvc-spp" class="btndvc fa fa-mobile-phone fa-lg" title="Smartphone Portrait"></button>
    <button id="dvc-spl" class="btndvc fa fa-mobile-phone fa-rotate-90 fa-lg" title="Smartphone Landscape"></button>
    <button id="dvc-tap" class="btndvc fa fa-tablet fa-lg" title="Tablet Portrait"></button>
    <button id="dvc-tal" class="btndvc fa fa-tablet fa-rotate-90 fa-lg" title="Tablet Landscape"></button>
</div>
<br>
<table class="dvc-table">
    <td>
        <p align="center">
            <iframe class="dvc-aut" src="test.html" />
        </p>
    </td>
</table>

jsfiddle: http://jsfiddle.net/AbeAlpha/fpmzf1nx/

或者是html上的什么东西? 我使用相同的id和类名,我试图改变,但仍然无法工作。我有点迷路了

我尝试粘贴其他在线编辑器,如codepen或kodtest,但没有任何效果。我有点难过

1 回复 | 直到 10 年前

James Waddington 10 年前

你目前的情况有几个问题。首先,你有一个容器占据了整个显示屏,在它们的顶部:

.dvc-table {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    z-index:1;
}

您可以通过在iframe包装器上方放置按钮来解决此问题: .div-dvc {z-index: 2;}

其次,将iframe隐藏为

.dvc-aut {
    display:none;
}

但你再也不会表现出来了。只需删除此按钮,或向其中一个按钮添加show()。 Here's a fiddle with working buttons .