0

我是 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”之间的区别只是“背景”图像。为什么不能正常工作？？

声明了一些样式：

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

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

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

我认为问题在于您调用了 fadeToggle() 方法。当 fadeToggle() 动画完成时，它有效地从视图中隐藏元素，包括它的子元素（有你的标志）。

我认为您需要的是 .toggleClass('body2') 来更改目标元素的 css 类。

在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 回答