Я пытаюсь сделать одностраничную навигацию, но не могу показать и скрыть другие контейнеры.
basicall, это 3 ссылки. я фиксирую событие клика и устанавливаю соответствующее скрытие контейнера или показываю его с помощью эффекта скольжения.
код показан ниже. Спасибо за помощь.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.current
{
display: block;
}
#about_container, #principles_container, #programs_container
{
display: none;
}
</style>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('[id^=btn_]').click(function (event) {
event.preventDefault();
//here you can also do all sort of things
var elementToShowId = this.id;
elementToShowId = elementToShowId.replace("btn_", "") + "_container";
alert(elementToShowId);
if ($('.current').exists()) {
$(".current").hide('slide', { direction: 'right',
complete: function () {
show(elementToShowId);
$(this).removeClass('current');
}
}, 500, null);
}
else {
show(elementToShowId);
}
if ($('.active').exists()) {
$(".active").removeClass('active');
}
$(this).addClass('active');
});
});
function show(elementId) {
$("#" + elementId).show('slide', { direction: 'left', complete: function () {
$(this).addClass('current');
if (elementId == "contact") {
initializeMap();
}
}
}, 500, null);
}
</script>
</head>
<body>
<ul>
<li><a id="btn_about" href="#about"><strong>About</strong></a></li>
<li><a id="btn_principles" href="#principles"><strong>Principles</strong></a></li>
<li><a id="btn_programs" href="#programs"><strong>Programs</strong></a></li>
</ul>
<div id="home_container" class="current">
Home</div>
<div id="about_container">
about</div>
<div id="principles_container">
principles</div>
<div id="programs_container">
programs</div>
</body>
</html>
U может попробовать следующее:
#about_container, #principles_container, #programs_container
{
display: none !important;
}