Показать сообщение отдельно
  #4 (permalink)  
Старый 05.12.2014, 23:29
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Если нравится ООП подход:
<nav>
	<ul id="menu">
		<li><a href="a.html" class="nav-cell nav-cell-active">Бла бла</a></li>
		<li><a href="b.html" class="nav-cell">Бла бла</a></li>
	</ul>
</nav>
<main id="content"></main>
<script>
function Menu(menuElement, contentElement, linkClass, activeClass) {
	var links = menuElement.querySelectorAll('.' + linkClass);
	var activeLink = menuElement.querySelector('.' + activeClass);

	var menu = this;
	var onclick = function() {
		menu.activateLink(this);
		return false;
	};
	for (var i = 0; i < links.length; i++) {
		links[i].onclick = onclick;
	}
	this.links = links;
	this.activeLink = activeLink;
	this.activeClass = activeClass;
	this.contentElement = contentElement;
}

Menu.prototype.activateLink = function(link) {
	var request = new XMLHttpRequest();
	request.open('GET', link.href);
	var menu = this;
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			if (request.status == 200) {
				menu.displayContent(request.responseText);
			} else {
				menu.displayContent(menu.errorMessage);
			}
		}
	};
	request.send(null);
	this.activeLink.className = this.activeLink.className.replace(new RegExp('\\s*' + this.activeClass), '');
	this.activeLink = link;
	this.activeLink.className += this.activeClass;
};
Menu.prototype.displayContent = function(content) {
	this.contentElement.innerHTML = content;
};
Menu.prototype.errorMessage = '<b>Ошибка при загрузке</b>';

var menu = document.querySelector('#menu');
var content = document.querySelector('#content');
new Menu(menu, content, 'nav-cell', 'nav-cell-active');
</script>
__________________
В личку только с интересными предложениями
Ответить с цитированием