Не понимаю как индексируются данные в XML - отсюда не знаю как вызвать только тот элемент, который мне нужен для вставки в HTML по клику!?
вот.....index.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8">
<title>portfolio</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>
<table class="master">
<tr>
<td>
<center id="logo">
</center>
</td>
</tr>
<tr>
<td>
<center id="menu">
</center>
</td>
</tr>
<tr>
<td id="view">
</td>
</tr>
</table>
</body>
</html>
вот...base.xml
<?xml version='1.0' encoding='utf-8'?>
<container>
<logo>
<title>Portfolio</title>
</logo>
<site>
<menu>Page1</menu>
<url>page1.html</url>
</site>
<site>
<menu>Page2</menu>
<url>page2.html</url>
</site>
<site>
<menu>Page3</menu>
<url>page3.html</url>
</site>
</container>
вот...index.css
*{
padding: 0;
margin: 0;
}
body {
background: url('../img/free4.jpg') no-repeat center center fixed;
background-size: cover;
}
.master{
width: 1000px;
position: relative;
margin:0 auto;
padding-top: 20px;
padding-bottom: 20px;
}
.menu{
padding: 8px;
font-family: Georgia;
font-style: italic;
text-decoration: underline;
font-size: 28pt;
color: #fff;
cursor: pointer;
}
.menu:hover{
text-decoration: none;
}
.mactive {
text-decoration: none;
}
.view{
width: 1000px;
border: 0px solid #fff;
border-radius: 10px;
background: url('../img/bg2.png') repeat;
}
.logo{
font-family: Georgia;
font-size: 60px;
color: #fff;
position: relative;
bottom: 0px;
}
вот....sсript.js
$(document).ready(function(){
$.ajax({
type: 'GET',
url: 'base.xml',
dataType: 'xml',
success: function(xml){
$(xml).find('container logo').each(function(){
var logo = $(this).find('title').text();
$('<l class="logo"></l>').html(logo).appendTo('#logo');
$(xml).find('site').each(function(){
var menus = $(this).find('menu').text();
var pages = $(this).find('url').text();
$('<m class="menu"></m>').html(menus).appendTo('#menu');
$('<div class="view"></div)').load(pages).appendTo('#view');
var buttons = $('.menu');
var i = buttons.index(this);
buttons.click(function(){
buttons.removeClass('mactive'),
$(this).addClass('mactive');
});
});
});
},
error: function(){alert("ERROR not found XML file");}
});
});
сам скрипт еще не доделан, потому что остановился на индексации данных, а вот
притаком раскладе скрипта, мне выдает все мои страницы и погружает в index.html.....а я хочу чтоб в начале грузилась только Page1.html, а остальные - по клику....но даже не могу вывести Page1.html.....прописывал .eq(0), начинает глючить сильно.....помогите плз! может не правильный XML???