0

私はJQuery + CSSが初めてなので、しばらくお待ちください。ロゴ付きのヘッダーだけを持つ Web サイトを作成していますが、ボタンのようにする必要があります。クリックすると、上部の div の背景 (画像) を変更する必要があります。しかし、それをクリックすると、背景は本来のように変わりますが、ロゴは消えます..

私の問題は単純なはずですが、どこにも解決策がありません...私はこれを使用しています:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/atooltip.jquery.js"></script>
        <script type="text/javascript" src="js/kwicks-1.5.1.pack.js"></script>
        <script type="text/javascript" src="js/script.js"></script>


</head>
<body id="page1">
<div class="body2" >
    <div id = "fundo" class="bodyoff">
        <div class="main">
<!-- header -->
            <header>
                <div id="a">
                    <h1><a id="logo" class="normaltip" title="Under Construction!"></a>
                </div>
            </header>
            <div class="ic">myweb.com.br</div>
<!-- / header -->
<!-- content -->
            <div class="inner">
                <div class="kwiks_wrap">
                </div>
            </div>
<!-- / content -->
<!-- footer -->
            <footer>
                <div class="wrapper">
                    <ul id="icons">
                        <li><a href="#" class="normaltip" title="Facebook"><img src="images/icon1.png" alt=""></a></li>
                        <li><a href="#" class="normaltip" title="Twitter"><img src="images/icon4.png" alt=""></a></li>
                    </ul>
                </div>
                Support <a rel="nofollow" href="http://www.example.ufmg.br/" target="_blank">Inovation</a> - Example <br>
            </footer>
<!-- / footer -->
        </div>
    </div>
</div>
<script>
    $("#logo").click(
        function(){
            $("#fundo").fadeToggle("body2");
        }
    );
</script>
</body>
</html>

「body2」と「bodyoff」の違いは、「背景」イメージだけです。なぜ正しく動作しないのですか??

いくつかのスタイルが宣言されています:

.bodyoff {
    background: url(../images/bg_img_turnoff.jpg) top center no-repeat;
    height: 100%;
    min-height: 745px; } 
.body2 {
    background: url(../images/bg_img.jpg) top center no-repeat;
    height: 100%;
    min-height: 745px; } 
h1 {
    float: left;
    padding: 114px 0 0 63px; }
#logo {
    display: block;
    background: url(../images/logo.png) repeat;
    width: 319px;
    height: 86px;
    text-indent: -9999px; }

私が間違っているのは何ですか？ロゴが消えるはずがありません...そうですか？:/

4

1 に答える 1

1

#logo divに高いz-index、z-index：9999を与えてみてください。

それでも問題が解決しない場合は、div.backgroundを使用する代わりに、imgタグを使用してロゴを保持します。

ロゴのimgタグは、これを行うためのより良い方法だと思います。

問題はfadeToggle（）メソッドの呼び出しだったと思います。これは、fadeToggle（）アニメーションが完了すると、子要素（ロゴがあります）を含む要素を効果的に非表示にします。

ここで必要なのは、ターゲット要素のcssクラスを変更するための.toggleClass（'body2'）だと思います。

http://jsfiddle.net/BuddhiP/VY3tp/2/で変更されたフィドルを確認してください

jQueryドキュメント：toggleClassとfadeToggle

お役に立てれば。以前にfadeToggle（）に気づかなかったことについて申し訳ありません。

また、背景画像のタグをsrc属性の直接タグに変更しました。これは、背景画像が実際には背景画像ではない場合、特にクリック可能にする場合は、背景画像を使用しないでください。これにより、ロゴをオーバーレイする要素がページにさらに表示された場合に、後で多くの問題が発生する可能性があります。

<img id="logoimg" tittle="my logo" src="http://img211.imageshack.us/img211/1775/logoex.png"></img>

ただし、この変更はこの例が機能するために必要ではなく、元の行でも機能します

<a id="logo" tittle="my logo"></a>
于 2012-11-25T06:38:26.837 に答える