Jump to content
  • 0

Не работает код


skvaer09
 Share

Question

Извините если пишу не в ту тему. Я тут новенький.

У меня возник вопрос по верстке ,у меня есть 4 блока в меню,которые при нажатие первого блока он должен открываться и если нажимаешь другой блок то первый блок должен закрыться а этот блок открыться.

Я сделал но почему блоки при открытие появляются в другом месте а потом вставляются в нужное место.

В чем дело?? и правильно я написал вообще коды?

script

$(document).ready(function() {



$('div[id^=blockNav]').hide();

$('li.van').click (function() {
$('div#blockNav1').fadeIn();
$('div[id^=blockNav]:not(div#blockNav1)').fadeOut();
});

$('li.tri').click (function() {
$('div#blockNav2').fadeIn();
$('div[id^=blockNav]:not(div#blockNav2)').fadeOut();
});

$('li.4tri').click (function() {
$('div#blockNav3').fadeIn();
$('div[id^=blockNav]:not(div#blockNav3)').fadeOut();
});

$('li.5ty').click (function() {
$('div#blockNav4').fadeIn();
$('div[id^=blockNav]:not(div#blockNav4)').fadeOut();
});

});

4 блока

div#blockNav1{
width:145px;
height:200px;
background-image:url(..//imagess/BgBlockNav.png) ;
outline:0px solid #cc0000;
margin-top:36px;
}

div#blockNav2{
width:181px;
height:200px;
background-image:url(..//imagess/BgBlockNav.png) ;
outline:0px solid #cc0000;
margin-top:36px;
margin:36px 150px;
}

div#blockNav3{
width:292px;
height:200px;
background-image:url(..//imagess/BgBlockNav.png) ;
outline:0px solid #cc0000;
margin-top:36px;
margin:36px 337px;
}

div#blockNav4{
width:187px;
height:200px;
background-image:url(..//imagess/BgBlockNav.png) ;
outline:0px solid #cc0000;
margin-top:36px;
margin:36px 634px;
}

html

<div id="wrapper">
<div id="headar"></div>
<div id="nav">

<ul class="mainMenu">
<li style="border-left:none;" class="van">aaaaa</li>
<li class="tri">ffffft</li>
<li class="4tri">sssss</li>
<li class="5ty">ddddd</li>
<li style="border-right:none;">Войти или зарегистрировать</li>

<div id="blockNav1"></div>

<div id="blockNav2"></div>

<div id="blockNav3"></div>

<div id="blockNav4"></div>

</ul>

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

Вот полный код я его смотрел)

<html>
[list=1]

[*]</head>
[*] <title>Planet Games</title>
[*] <link href="style/style.css" rel="stylesheet" type="text/css">
[*]
[*] <script type="text/javascript" src="js/jquery.js"></script>
[*] <script type="text/javascript" src="js/script.js"></script>
[*]
[*]</head>
[*]<body>
[*] <div id="wrapper">
[*] <div id="headar"></div>
[*] <div id="nav">
[*]
[*] <ul class="mainMenu">
[*] <li style="border-left:none;" class="Diablo1">Diablo</li>
[*] <li class="warCraft2">WarCraft</li>
[*] <li class="wow3">World of WarCraft</li>
[*] <li class="starcraft4">StarCraft</li>
[*] <li style="border-right:none;">Войти или зарегистрировать</li>
[*] </ul>
[*]
[*] <div id="blockNav1">
[*] <div class="closeBlock"></div>
[*] <span class="titlBlockNav">Навигация</span>
[*] <ul>
[*] <li><a href="#">Форум</a></li>
[*] <li><a href="#">файлы</a></li>
[*] <li><a href="#">Обои</a></li>
[*] <li><a href="#">Статьи</a></li>
[*]
[*] </ul>
[*] </div>
[*]
[*] <div id="blockNav2">
[*] <div class="closeBlock"></div>
[*] <span class="titlBlockNav2">НАВИГАЦИЯ</span>
[*] </div>
[*]
[*] <div id="blockNav3">
[*] <div class="closeBlock"></div>
[*] <span class="titlBlockNav3">НАВИГАЦИЯ</span>
[*] </div>
[*]
[*] <div id="blockNav4">
[*] <div class="closeBlock"></div>
[*] <span class="titlBlockNav4">НАВИГАЦИЯ</span>
[*] </div>
[*]
[*]
[*] </div>
[*]
[*] <div id="wrconnten">
[*] <div id="galeri"></div>
[*] <div id="contend"></div>
[*] </div>
[*]
[*] <div id="fuutar"></div>
[*] </div>
[*]</body>
[*]</html>
[/list]

Вот 2 ошибки но я не пойму как их убрать

Line 1, Column 1: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>"

<html>

Line 2, Column 7: end tag for element "HEAD" which is not open

</head>

Edited by skvaer09
Link to comment
Share on other sites

  • 0

<ul class="lvl1">
<li><a href="#">Пункт1</a></li>
<li><a href="#">Пункт2</a></li>
<li><a href="#">Пункт3</a>
<ul class="lvl2">
<li><a href="#">Пункт3-1</a></li>
<li><a href="#">Пункт3-2</a></li>
<ul>
</li>
<li><a href="#">Пункт4</a></li>
</ul>

Так обычно выглядит многоуровневое меню

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy