Question

该网站的想法将是一个包含6个独立div类的主页面，一旦点击一个，我希望它升到页面顶部，其他元素消失。我正在使用两个图像进行常规外观和悬停。对于第一个链接，我希望它加载新的背景，因此它只有一个元素。我该怎么做呢？我对jquery不是很精通：

    <html>
    <head>
    <title> Div Blocks</title>

    <style type="text/css">

        body {
            background: url("bg.jpg");

    width:1920px;
    height:1000px;
            font-size: 30px; 
            font-family:Comic Sans MS;
            line-height: 1.429;
            margin: 0;
            padding: 0;
            text-align: center;
            cursor : url("nav.png"), default;

        }
        a{
        cursor : url("nav1.png"), pointer
        }
     div.one a
    {
    position: absolute;
    top:0px;
    left:0px;
    width: 800px;
    height: 333px;
    text-decoration:none;
    -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out;
    }
    div.one a:hover
    {background: url("bgalt.jpg");
     background-position: 0px 0px;
    }
    div.one a:enabled
    {background: url("branding.jpg");}

    div.two a
    {
    position: absolute;
    top:334px;
    left:0px;
    width: 800px;
    height: 333px;
    text-decoration:none;
    }
    div.two a:hover
     {background: url("bgalt.jpg");
    background-position: 0 746px;
    }
    div.three a
    {
    position: absolute;
    top:667px;
    left:0px;
    width: 900px;
    height: 333px;
    text-decoration:none;
    }
    div.three a:hover
     {background: url("bgalt.jpg");
    background-position: 0 413px;
    }

    div.r1 a
    {
    position: absolute;
    top:0px;
    left:1120px;
    width: 800px;
    height: 333px;
    text-decoration:none;
    }
    div.r1 a:hover
     {background: url("bgalt.jpg");
    background-position: 800px 0px;
    }

    div.r2 a
    {
    position: absolute;
    top:334px;
    left:1120px;
    width: 900px;
    height: 333px;
    text-decoration:none;
    }
    div.r2 a:hover
     {background: url("bgalt.jpg");
    background-position: 800px 746px;
    }
    div.r3 a
    {
    position: absolute;
    top:667px;
    left:1120px;
    width: 900px;
    height: 333px;
    text-decoration:none;
    }
    div.r3 a:hover
     {background: url("bgalt.jpg");
    background-position: 800px 413px;
    }

    </style>
    </head>
    <body>
        <div id="fade">
        <div class="one">
    <a href="javascript:void(0)"onmousedown="myObject()"></a>
        </div>
        </div>
        <div class="two">
    <a href="#"></a>
        </div>
        <div class="three">
    <a href="#"></a>
        </div>
        <div class="r1">
    <a href="#"></a>
        </div>
          <div class="r2">
    <a href="#"></a>
        </div>

                <div class="r3">
    <a href="#"></a>
        </div>
        </body>

    <script>
        $('a').click(function () 
{
    event.preventDefault(); 
css('background-image', 'url(' branding.jpg')');
});


    </script>

我尝试使用css，因为你可以看到代码，但它没有成功

Answer 1

您可能正在寻找：

$("a").click(function(event){
    event.preventDefault(); // prevent the link from changing the location
    $(this)
        .closest("div") // select the parent div of the link
        .animate("top","0") // animation to take it to the top of the page
        .siblings() // select all the siblings of the div
        .hide(); // hide them
});

Answer 2

$('a').click(function(event) {
    event.preventDefault(); 
    $('body').css('background-image', 'url(branding.jpg)');
});

Answer 3

您需要向我提供正确的HTML内容，以便向您发送正确的jQuery代码。我刚刚重新编写了你的java脚本，如下所示。在HEAD部分的代码上面屁股。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
   <script type='text/javascript'>
    $(document).ready(function(){       
        $('a').click(function (e){
                e.preventDefault(); 
                $(this).css('background-color', 'gray');
            });
        });
   </script>

jquery隐藏元素，加载新背景

3 个答案: