| CatinTheBread |
07.06.2013 12:47 |
Почему то не работает
Всем доброго времени суток.
Есть страничка http://osobniak.com/123-2
и есть код, который на jsfiddle.net работает, а на сайте нет? может кто подскажет? буду очень признателен!
$(function(){
$(".buttons button").on("click", function(){
var layerIndex = $(this).parents("li").index();
if(!($(".layers div:eq("+layerIndex+")").hasClass("active"))){
$(".layers .active").slideToggle(100, function(){
$(this).removeClass("active");
$(".layers div:eq("+layerIndex+")")
.slideToggle(100)
.addClass("active");
});
}
});
})
Код:
style type='text/css'>
*{
margin: 0;
padding: 0;
}
.buttons{
margin-bottom: 10px;
}
.buttons li{
list-style: none;
display: inline;
margin-right: 10px;
}
.buttons button{
padding: 5px;
}
.layers div{
display: none;
background: #00F;
color: #FFF;
padding: 10px;
font: 14px/20px normal Arial, sans-serif;
}
.layers .active{
display: block;
}
.but_lavender {
margin: 10px 0px 0px 0px;
text-decoration: none !important;
color: #333;
font: 100% Arial, Helvetica, serif;
padding: 5px 13px;
font-size: 13px;
border: solid 1px #aaa;
border-color: #99958c;
background: #c0c0c0;
background: -moz-linear-gradient(top, #f7f0fe 0%, #e8d1ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f0fe), color-stop(100%,#e8d1ff));
background: -webkit-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
background: -o-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
background: -ms-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f0fe', endColorstr='#e8d1ff',GradientType=0 );
background: linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
vertical-align: middle;
display: inline-block;
zoom:1;
*display:inline;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
}
.but_lavender:hover {
text-decoration: none;
background: #d0f0c0;
}
.but_lavender:active {
position: relative;
top: 1px;
}
</style>
<ul class="buttons">
<li><button class='but_lavender'>Рабочее проектирование</button></li>
<li><button class='but_lavender'>Second</button></li>
<li><button class='but_lavender'>Third</button></li>
<li><button class='but_lavender'>Fourth</button></li>
</ul>
<div class="layers">
<div class="active">One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
|