помогите упростить код
Новичок в жквери..
есть три кнопки : <span class='info orange'>Информация</span> <span class='action'>Активность</span> <span class='config'>Настройки</span> смысл такой : кликаю на кнопку , к ней добавляется класс orange(на первой кнопке по умолчанию).Соответственно , кликаю по другой , с первой orange удаляется ,а ко второй добавляется .. Вот код :
$(function(){
$(".action").click(function() {
$(".action").addClass('orange');
$(".info").removeClass('orange');
});
});
это я описал клик на ACTION , а у меня еще 2 кнопки остаются .Т.е писать придется для каждой . Как грамотно оформить ? Спасибо. |
sarkis28,
$(function(){
var s = $("span");
s.click(function() {
s.not(this).removeClass("orange");
$(this).toggleClass("orange");
});
});
|
Спасибо за этот ответ ..Помогло ..
Еще вопрос : у меня при клике на определенную кнопку должен добавляться класс show ко след. элементам (они скрыты по умолчанию , кроме первого): <div class='main'> <span class='info_show show'>1</span> <span class='action_show'>2</span> <span class='config_show'>3</span> </div> Как можно это реализовать , использую ту схему , которую описали ранее.. делаю вот так :
$(function(){
var s = $("span");
s.click(function() {
s.not(this).removeClass("orange");
$(this).toggleClass("orange");
$(".main span").addClass("show");
});
});
Но тогда все три элемента начинают отображаться .. |
Цитата:
а ещё проще можно написать? может вы меню мастерите -- так их 100500 на форуме. |
Сорри за не ясность ..Попробую проще написать ..
Смотрите : это меню из трех кнопок , которые ранее вы уже мне писали , как сделать .. За каждой этой кнопкой появляется текст снизу ..По умолчанию выбрана 1я кнопка и виден ее текст ... а вообще , я нарисовал ..:thanks: https://cloclo1.datacloudmail.ru/vie...2803%40mail.ru |
рони,
если где-то уже было такое - киньте ссылочку , а то не могу построить поисковой запрос |
Цитата:
может html нормальный где будет понятно что такое ваш тест за кнопкой |
рони,
попробуйте по этой ссылке увидеть рисунок https://cloud.mail.ru/public/f127dc5...0%B5%D1%80.png |
вот конструкция моего меню..
<div class='block_info_main'> <div class='first'> <span class='info orange'>Информация</span> <div class='main'> <span class='info_show show '>текст1</span> </div> </div> <div class='first'> <span class='info orange'>Информация2</span> <div class='main'> <span class='info_show '>текст2</span> </div> </div> <div class='first'> <span class='info orange'>Информация3</span> <div class='main'> <span class='info_show '>текст3</span> </div> </div> </div> |
ORANGE- добавляет цвет к кнопкам
SHOW - делает видимым блоки info_show |
Цитата:
http://javascript.ru/forum/dom-windo...tml#post303196
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main {
display: none;
}
.orange {
background: #FFCC00;
}
.orange + div{
display: block;
}
span {
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var s = $(".block_info_main span");
s.click(function() {
s.not(this).removeClass("orange");
$(this).toggleClass("orange");
});
});
</script>
</head>
<body>
<div class='block_info_main'>
<div class='first'>
<span class='info orange'>Информация</span>
<div class='main'>
<span class='info_show show '>текст1</span>
</div>
</div>
<div class='first'>
<span class='info'>Информация2</span>
<div class='main'>
<span class='info_show '>текст2</span>
</div>
</div>
<div class='first'>
<span class='info'>Информация3</span>
<div class='main'>
<span class='info_show '>текст3</span>
</div>
</div>
</div>
</body>
</html>
|
Цитата:
|
вот живой пример http://demo.myopencart.ru/index.php?...&product_id=40
описание-отзывы-похожие товары |
| Часовой пояс GMT +3, время: 10:58. |