JQuery, чтобы скрыть элементы, загрузить новый фон - PullRequest
Новая
       0

JQuery, чтобы скрыть элементы, загрузить новый фон

0 голосов
/ 23 декабря 2011

Идея сайта будет состоять из главной страницы с 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, как вы можете видеть из кода, и это не сработало

Ответы [ 3 ]

1 голос
/ 23 декабря 2011

Возможно, вы ищете это: 

$("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
});
0 голосов
/ 23 декабря 2011

Вы должны предоставить мне правильный 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>
0 голосов
/ 23 декабря 2011 
$('a').click(function(event) {
    event.preventDefault(); 
    $('body').css('background-image', 'url(branding.jpg)');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...