У меня есть слайдер, который я сделал, часть слайдера работает правильно, но я пытаюсь получить большие пальцы при щелчке, чтобы получить белую рамку при нажатии, а затем вернуться к серому при нажатии на другую.Я пытаюсь сделать это через список, используя братьев и сестер.В этом JS есть кое-что постороннее, но это не должно «влиять на результат», но весь JS предназначен для переключения границ, этот слайдер работает на css.Вот скрипка, http://jsfiddle.net/qSDfW/12/
JS:
$(document).ready(function(){
$(".portfolio_thumb_list li:first").addClass("portfolio_slider_thumb_active");
$(".accordion a:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".portfolio_thumb_list li").click(function() {
$(this)
.addClass('portfolio_slider_thumb_active') //set the current as active
.siblings("li") //find sibling h3 elements
.removeClass("portfolio_slider_thumb_active") // and remove the active from
them
.end() // return selection to the current element
.next("p") // find the next p
.slideDown("slow") // and show it
.siblings("p:visible") // find the other visible p elements
.slideUp("slow"); // and hide them
$(this)
.find('a') // find a under current element
.addClass('portfolio_slider_thumb_active') // and add active class
.end() // return to current element
.siblings('li') // find sibling h3 elements
.find('a') // find their a elements
.removeClass('active'); // and remove the active
});
});
CSS:
#portfolio_thumb_list {
list-style-type: none;
width: 55px;
height: 16px;
margin: 0 auto;
margin-top: 20px;
padding: 0;
}
.portfolio_slider_thumb{
border:1px solid #555;
height:30px;
width:55px;
margin-top:-15px;
}
.portfolio_slider_thumb_active{
border:1px solid #fff;
height:30px;
width:55px;
margin-top:-15px;
}
HTML-код:
<ul id="portfolio_thumb_list">
<li class="portfolio_slider_thumb"><a href="#content-inner-1"><img
src="http://www.klossal.com/portfolio/thumbs/detail/space1.jpg" height="30px"
width="55px"></a></li>
<img src="/media/divider.png" width="100%" height="3px" border="0"
style="opacity:0.0;filter:alpha(opacity=0)">
<li class="portfolio_slider_thumb"><a href="#content-inner-2"><img
src="http://www.klossal.com/portfolio/thumbs/detail/space2.jpg" height="30px"
width="55px"></a></li>
</ul>
в скрипке немного больше CSS и HTML, потому что у меня есть весь слайдер, но я попытался опубликовать здесь более подходящие фрагменты.Не уверен, почему эти границы большого пальца не работают.Первый должен быть активным при нагрузке.