Внутристраничное меню jQuery
Здравствуйте господа, столкнулся с проблемой на которую не представляю решения :help:
Постараюсь понятно изложить: Есть меню <menu id="nav4"> <li id = "ksik"><a title="Компьютерные системы и комплексы">КCИК</a> <li id = "ks"><a title="Компьютерные сети">КС</a> <li id = "pks"><a title="Программирование в компьютерных системах">ПКС</a> <li id = "pi"><a title="Прикладная информатика">ПИ</a> <li id = "eby"><a title="Экономика и бухгалтерский учет">ЭБУ</a> <li id = "atpp"><a title="Автоматизация технологических процессов и производств">АТПП</a> <li id = "mts"><a title="Многоканальные телекоммуникационные системы">МТС</a> <li id = "sssk"><a title="Сети связи и системы коммутации">СССК</a> <li id = "ibts"><a title="Информационная безопасность телекоммуникационных систем">ИБТС</a> </menu> Это горизантальное меню, и переход происходит внутри страницы функцией slideDown. Оно выдвигает определенный div блок, а содержимое его берется из файла rate.php, переменная в этом блоке береться ajax post запросом по клику. Проблема в том, что сейчас оно работает достаточно глупо, т.е. по клику на объект меню происходит слайддаун, а при клике на другой объект меню происходит слайдап. Так быть не должно. Т.е. по клику на другой объект меню предыдущее должно слайдится вверх, а новое выдвигаться с новыми данными. А еще хотелось бы закрепить по клику класс, чтоб видно было какое именно сейчас активно. Вот код jQuery $(document).ready(function() {
$("#div5").hide();
var flagMenu=false;
var men = undefined;
$("#ksik").click(function() {
$("#ks a, #pks a, #pi a, #eby a, #atpp a, #mts a, #sssk a, #ibts a").removeClass('act');
$("#ksik a").toggleClass('act');
var men = "po";
if(flagMenu==true) {
$("#div5").slideUp(500);
flagMenu=!flagMenu;
} else {
$("#div5").slideDown(500);
flagMenu=!flagMenu;
}
$.post("/scripts/rate.php", {men: men},
function(html) {
$("#div5").empty();
$("#div5").append(html);
}
);
});
});
Это код одной из кнопок, на каждой стоит такой-же. Это очень нерационально, выполняется лоб в лоб, и не работает правильно к тому-же. Очень прошу помощи у вас, больше даже и нет к кому обратиться Спасибо! |
nonkalol,
тут будет открывашка 209 если остальные 208 вам не подойдут :cray: |
не понял шутку(((
|
|
рони,
спасибо, сейчас попробую разобраться |
открывашка 209 выделение пункта меню и запрос на сервер
nonkalol,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.active-menu-item {
background: #FFE4B5;
}
a {
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(function() {
var $but = $("#nav4 > li a"),
$blocks = $("#div5");
$blocks.hide();
$img = $("img", $blocks); // сервер имитация
$img.load(function() { // $.post callback
$blocks.slideDown()
});
$but.each(function(i, elem) {
var $el = $(elem),
url = $el.data('url');
$el.click(function(event) {
event.preventDefault();
$but.not($el).removeClass("active-menu-item");
$el.addClass("active-menu-item");
$blocks.slideUp(function() {
$img[0].src = url;
}); //$blocks.load(url,function() { $blocks.slideDown()}); что должно быть на самом деле
})
});
});
</script>
</head>
<body>
<ul id="nav4">
<li id="ksik">
<a data-url="http://www.forum-globalteam.ru/wp-content/uploads/motivator-12830.jpg" title="Компьютерные системы и комплексы">КCИК</a>
</li>
<li id="ks">
<a data-url="http://www.moirebenok.ua/gfx/00/00/8b/d3/image-08twf7d_jpg/thumb_800x600_10_w.jpg" title="Компьютерные сети">КС</a>
</li>
<li id="pks">
<a data-url="http://www.leben-und-erziehen.de/wp-content/uploads/2013/04/baby_quiz_fragen_neugierig_iSt_000015776994.jpg" title="Программирование в компьютерных системах">ПКС</a>
</li>
<li id="pi">
<a data-url="http://womem.org/infusions/al_genmem/includes/gen_image.php?image=307&gen_type=2&text1=&text2=" title="Прикладная информатика">ПИ</a>
</li>
<li id="eby">
<a data-url="http://content.foto.mail.ru/mail/sharunova60/_blogs/i-247.jpg" title="Экономика и бухгалтерский учет">ЭБУ</a>
</li>
<li id="atpp">
<a data-url="http://mindcamp.org/images-programs/orane_fun.jpg" title="Автоматизация технологических процессов и производств">
АТПП</a>
</li>
<li id="mts">
<a data-url="http://www.blissstudio.ru/thumb/732/487/uploads/photos/213~jpg" title="Многоканальные телекоммуникационные системы">МТС</a>
</li>
<li id="sssk">
<a data-url="http://upload.wikimedia.org/wikipedia/commons/7/7f/Smile_is_universal.jpg" title="Сети связи и системы коммутации">СССК</a>
</li>
<li id="ibts">
<a data-url="http://www.ahitravel.com/content/images/programs/CHINA13A/Foto_807883.jpg" title="Информационная безопасность телекоммуникационных систем">
ИБТС</a>
</li>
</ul>
<div class="" id="div5">
<img src="" alt="">
</div>
</body>
</html>
|
Огромное спасибо, сейчас под себя запилю это дело, но вопрос еще в другом, можно ли сделать так чтоб новые данные начинали загружаться только после слайдапа, т.е. сейчас при клике картинка загружается уже во время того, пока закрывается еще предыдущий слайд
Но если это проблематично, то и ладно, в любом случае огромное спасибо) |
nonkalol,
строка 37 $blocks.slideUp( здесь ваш запрос на сервер);//изменено смотрите пост 6 снова |
| Часовой пояс GMT +3, время: 20:12. |