Question

我是JQuery + CSS的新手，请耐心等待。我正在制作一个只带有徽标标题的网站，我需要它就像一个按钮..它必须在点击它时更改上部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”之间的区别只是“背景”图像。 Wy工作不正常？

声明了一些样式：

.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; }

我做错了什么？徽标不应该消失......应该吗？：/

Answer 1

<击> 尝试给#logo div一个更高的z-index，z-index：9999;

~~如果这不起作用，请使用img标记来保存徽标，而不是使用div.background。~~

~~我认为logo的img标签是一种更好的方法。~~

我认为问题是你对fadeToggle（）方法的调用。当fadeToggle（）动画完成时，它会有效地隐藏视图中的元素，包括其子元素（有你的徽标）。

我认为你需要的是.toggleClass（'body2'）来改变目标元素的css类。

在http://jsfiddle.net/BuddhiP/VY3tp/2/
检查更改的小提琴
jQuery doc：toggleClass vs 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>

fadeToggle（）效果的图像问题

1 个答案: