Блок с загрузкой отдельно от страницы - JavaScript, Ajax

shevron · 01.07.2011, 15:23

Дайте нужный исходник или помогите написать вот такую вот вещь(Предположительно она должна быть на JQ) :

Нужно чтобы эта менюшка переключалась без загрузки всей странички

ZvEr_HaCkEr · 01.07.2011, 16:00

index.html

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml" lang="ru"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<title>Untitled document</title> 
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"> 
$(function () {
    var tabContainers = $('div.tabs > div');
    tabContainers.hide().filter(':first').show();
    
    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).show();
        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});
</script> 
</head> 
<body> 
<h1>Цитаты</h1> 
<div class="tabs"> 
    <ul class="tabNavigation"> 
        <li><a class="" href="#first">First Tab</a></li> 
        <li><a class="" href="#second">Second Tab</a></li> 
        <li><a class="" href="#third">Third Tab</a></li> 
    </ul> 
    
    <div id="first"> 
        <h2>Lorem ipsum</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
    </div> 
    <div id="second"> 
        <h2>Sed ut perspiciatis</h2> 
        <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p> 
    </div> 
    <div id="third"> 
        <h2>Temporibus autem</h2> 
        <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. </p> 
    </div> 
</div> 
</body> 
</html>

style.css

Код:

body { 
margin: 10px; 
padding: 0; 
font: 1em Verdana, arial, sans-serif; 
font-size: .8em; 
}
 
h1 { 
margin-bottom: 1em; 
}
 
div.tabs {
background: #333333;
padding: 1em;
}
 
div.container { 
margin: auto; 
width: 90%; 
margin-bottom: 10px;
}
 
ul.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}
 
ul.tabNavigation li {
display: inline;
}
 
ul.tabNavigation li a {
padding: 3px 9px;
background-color: #666666;
color: #000000;
text-decoration: none;
}
 
ul.tabNavigation li a.selected,
ul.tabNavigation li a.selected:hover {
background: #ffffff;
color: #000000;
}
 
ul.tabNavigation li a:hover {
background: #ccc;
color: #000;
}
 
ul.tabNavigation li a:focus {
outline: 0;
}
 
div.tabs div {
padding: 5px;
margin-top: 3px;
border: 1px solid #ffffff;
background: #ffffff;
}

div.tabs div h2 {
margin-top: 0;
}

shevron · 01.07.2011, 17:05

Спасибо, это то, что я искал!

01.07.2011, 15:23	#1
shevron Пользователь Регистрация: 27.08.2010 Сообщений: 30	Блок с загрузкой отдельно от страницы Дайте нужный исходник или помогите написать вот такую вот вещь(Предположительно она должна быть на JQ) : Нужно чтобы эта менюшка переключалась без загрузки всей странички

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Загрузить картинку сразу с загрузкой страницы	Форсировка	HTML и CSS	5	17.01.2011 20:25
Числа отдельно, хлам отдельно	Keetotko	Общие вопросы C/C++	6	18.10.2010 18:15
Проблема с загрузкой страницы	Nester	Работа с сетью в Delphi	5	06.11.2009 13:37
WebBrowser проблема с загрузкой страницы и последующей обработкой	OkeaH	Общие вопросы Delphi	3	15.02.2009 01:43
Проблемы с загрузкой главной страницы.	antfrolov	Помощь студентам	2	05.04.2008 16:50

01.07.2011, 17:05	#3
shevron Пользователь Регистрация: 27.08.2010 Сообщений: 30	Спасибо, это то, что я искал!