我制作了一个 slider ， slider 部分工作正常，但我试图在单击时使拇指基本上在单击时具有白色边框，然后在单击另一个时返回灰色。我正在尝试通过使用 sibling 的列表来做到这一点。这个JS中有一些无关的东西，但它不应该真正影响结果，但是所有的JS都是为了切换边框，这个 slider 在CSS上运行。这是 fiddle ，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>
在 fiddle 中，有更多的 CSS 和 HTML，因为我有整个 slider ，但我尝试在这里发布更相关的部分。不知道为什么这些拇指边框不起作用。第一个应该在加载时处于事件状态。
最佳答案
您正在使用.仅具有 id 的 DOM 元素的(类)选择器..对于id您使用的选择器# - 你的整个click功能不起作用..试试这个:
$(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() {
$("#portfolio_thumb_list li").removeClass('portfolio_slider_thumb_active');
$(this)
.addClass('portfolio_slider_thumb_active') //set the current as active
.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
});
});
更新
它无法在您的网站上运行的原因如下，下面是<script>您的 <head> 中的标签:
<script type="text/javascript" src="/portfolio/portfolio_slider.js"></script>
<script type="text/javascript" src="/portfolio/space_animation.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
您需要重新排列它们 - 以便实际的 jQuery 库(当前是底部的库)位于需要 jQuery 的其他库之上
关于jquery - 在分配给单击的元素时从同级中删除类不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9926297/