Форум

Vitaly · #1 (**permalink**) 22.06.2009, 23:22

Дело вот в чём, есть сайт из 4-х страниц, условно, я хочу сделать, чтобы при нажатии на пункт меню у меня подгружался соответствующий элемент p, но после добавления он у меня пропадает с исходного места, почему?Как сделать

$(document).ready(function(){
//Default						   
$("#content").hide();
$("#hide").hide();

//Actions on click



$("div#Home.MenuItem a").click(function () { 
	$("div#Home.MenuItem a").click(function () { 
	$("#content").empty();									 
	 loadcontent("home");
    });

$("div#Foto.MenuItem a").click(function () { 
 	$("#content").empty();							 
      loadcontent("foto");
    });

$("div#People.MenuItem a").click(function () { 
	 $("#content").empty();	
      loadcontent("people");
    });

$("div#Help.MenuItem a").click(function () {
	$("#content").empty();										 
      loadcontent("help");
    });

function loadcontent(pclass){
$("#hide p." + pclass).appendTo("#content");
$("#content").show();
}

//end document ready
  });

<div id="hide">
<p class="home">Home is here</p>
<p class="foto">Foto is here</p>
<p class="people">People</p>
<p class="help">Help</p>
</div>

Или если проще сказать, как сделать чтобы AppendTo присоединял элемент, а не удалял его после присоединения, если такой принцип конечно, или я что то не так понял, спасибо.А так у мнея пропадает элемент после присоединеня из div id hide, и подгрузка не работает,может стоит другие варианты попробывать какие то, спасибо

e1f · #2 (**permalink**) 23.06.2009, 00:05

$("#hide p." + pclass).clone(true).appendTo("#content");

Vitaly · #3 (**permalink**) 23.06.2009, 17:17

e1f, Благодарю, заработало, только вот отлавливаю баг в Опере и FF, при клике у меня появляется полоса прокрутки(как бы это нормально) и весь контеинер съезжает влево, как я понимаю это из за полосы прокрутки? Можно ли с этим как то побороться? Спасибо

e1f · #4 (**permalink**) 23.06.2009, 18:08

Код в студию, я же не знаю, что именно у Вас там съезжает и куда

Vitaly · #5 (**permalink**) 23.06.2009, 22:33

<html>
  <head>
  <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
   $(document).ready(function(){ // Здесь ваш код 
  
 $("#header").click(function() {
 
 $("#content").hide();
 
 })
  }); 
      // Your code goes here
    </script>
  </head>
  <body>
  
  <div id="container">
<div id="header">click me</div>
<div id="content"></div>
<div id="footer"></div>
 </div>
  
  </body>
  </html>

body {
margin:0;
padding:0;
background:#ffffff;
background-position:fixed;
}

#container {
margin:0 auto;
background:green;
width:500px;
height:300px;
position:relative;
}

#header {
float:left;
width:500px;
height:100px;
background:red;
}

#content {
float:left;
width:500px;
height:600px;
background:yellow;
}

#footer {
float:left;
width:500px;
height:100px;
background:#dddddd;
}

создал похожий вариант и эффект тот же

Спасибо

Vitaly · #6 (**permalink**) 24.06.2009, 10:54

Проблема решена тем, что надо было не empty() а hide(), оказалось это две большие разницы))

Форум

Справочник

Discord чат

Курсы javascript