| |
|
|
| | Плохо знаю JS, пытаюсь что-то писать, но получается очень громоздко. Уверен, что можно получившийся код оптимизировать как-то...
JS:
<script type="text/javascript">
$(document).ready(function(){
$("#change_color_buttons a:first").addClass("active");
$("#change_colors .change_color:not(:first)").hide();
$("#change_color_buttons a").eq(0).click(function(){
$(this).toggleClass("active");
$(this).siblings("a").removeClass("active");
$("#change_colors .change_color").eq(0).show();
$("#change_colors .change_color").eq(1).hide();
$("#change_colors .change_color").eq(2).hide();
});
$("#change_color_buttons a").eq(1).click(function(){
$(this).toggleClass("active");
$(this).siblings("a").removeClass("active");
$("#change_colors .change_color").eq(0).hide();
$("#change_colors .change_color").eq(1).show();
$("#change_colors .change_color").eq(2).hide();
});
$("#change_color_buttons a").eq(2).click(function(){
$(this).toggleClass("active");
$(this).siblings("a").removeClass("active");
$("#change_colors .change_color").eq(0).hide();
$("#change_colors .change_color").eq(1).hide();
$("#change_colors .change_color").eq(2).show();
});
$(".change_color .layer:first").addClass("active");
$(".change_color .change_color_layer").hide();
$(".change_color .change_color_layer").eq(0).show();
$(".change_color .change_color_layer").eq(3).show();
$(".change_color .layer").eq(0).click(function(){
$(this).toggleClass("active");
$(this).siblings(".layer").removeClass("active");
$(".change_color .change_color_layer").eq(0).show();
$(".change_color .change_color_layer").eq(1).hide();
$(".change_color .change_color_layer").eq(2).hide();
});
$(".change_color .layer").eq(1).click(function(){
$(this).toggleClass("active");
$(this).siblings(".layer").removeClass("active");
$(".change_color .change_color_layer").eq(0).hide();
$(".change_color .change_color_layer").eq(1).show();
$(".change_color .change_color_layer").eq(2).hide();
});
$(".change_color .layer").eq(2).click(function(){
$(this).toggleClass("active");
$(this).siblings(".layer").removeClass("active");
$(".change_color .change_color_layer").eq(0).hide();
$(".change_color .change_color_layer").eq(1).hide();
$(".change_color .change_color_layer").eq(2).show();
});
$(".change_color .layer").eq(3).click(function(){
$(this).toggleClass("active");
$(this).siblings(".layer").removeClass("active");
$(".change_color .change_color_layer").eq(3).show();
$(".change_color .change_color_layer").eq(4).hide();
$(".change_color .change_color_layer").eq(5).hide();
});
$(".change_color .layer").eq(4).click(function(){
$(this).toggleClass("active");
$(this).siblings(".layer").removeClass("active");
$(".change_color .change_color_layer").eq(3).hide();
$(".change_color .change_color_layer").eq(4).show();
$(".change_color .change_color_layer").eq(5).hide();
});
$(".change_color .layer").eq(5).click(function(){
$(this).toggleClass("active");
$(this).siblings(".layer").removeClass("active");
$(".change_color .change_color_layer").eq(3).hide();
$(".change_color .change_color_layer").eq(4).hide();
$(".change_color .change_color_layer").eq(5).show();
});
});
</script>
|
HTML:
<div id="change_color_buttons">
<a href="#"><span>товар</span></a>
<a href="#"><span>спереди</span></a>
<a href="#"><span>сзади</span></a>
</div>
<div id="change_colors">
<div class="change_color">
<a href=""><img src=""></a>
</div>
<div class="change_color">
<a class="layer" href="#">link1</a>
<a class="layer" href="#">link2</a>
<a class="layer" href="#">link3</a>
<a href=""><img src=""></a>
<div class="change_color_layer">1</div>
<div class="change_color_layer">2</div>
<div class="change_color_layer">3</div>
</div>
<div class="change_color">
<a class="layer" href="#">link1</a>
<a class="layer" href="#">link2</a>
<a class="layer" href="#">link3</a>
<a href=""><img src=""></a>
<div class="change_color_layer">1</div>
<div class="change_color_layer">2</div>
<div class="change_color_layer">3</div>
</div>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: kireyev
(15.06.2011 в 09:03)
| | | Если бы вы в краце описали что делает скрипт, чем он вас не устраивает и что хотите получить - быстрее бы получили ответ. | |
| |
|
|
| |
|
|
| |
для: Гость
(15.06.2011 в 09:35)
| | | Скрипт загружает несколько страниц вкладок и по нажатию отображает ту или иную вкладку.
Организация вкладок такая:
1.
2.1
2.2
2.3
3.1
3.2
3.3
Т.е. всего 7 страниц. Все работает, все нормально, но JS уж очень громоздкий вышел... Вот бы его сократить немного - было бы супер!!! | |
| |
|
|
| |
|
|
| |
для: kireyev
(15.06.2011 в 11:35)
| | | Вы сейчас изобрели jQueryUI Tabs ( http://jqueryui.com/demos/tabs/ )
Что бы сделать код менее громоздким попробуйте более абстрагировать скрипты от самого html кода, что бы их в последствии можно было легко и без последствий изменять, просто следуя какой-либо структуре .
Т.е. напримере jQueryUI Tabs сделайте структуру табов вида
<div id="tabs">
<ul>
<li><a href="#tabs-1">Заголовок1</a></li>
<li><a href="#tabs-2">Заголовок2</a></li>
<li><a href="#tabs-3">Заголовок3</a></li>
</ul>
<div id="tabs-1">
Контент1
</div>
<div id="tabs-2">
Контент2
</div>
<div id="tabs-3">
Контент3
</div>
</div>
|
и вешаете обработчик что при клике в $('#tabs ul li') берете из ссылки значение #tabs-1, находите в $('#tabs') div с этим ID его показываете и скрываете все остальные. Таким же образом делаются вложенные табы. | |
| |
|
|
