Question

我有一个我做过的滑块，滑块部分正常工作，但我点击时基本上点击时有拇指，点击时有一个白色边框，然后点击另一个时再回到灰色。我正试图通过使用兄弟姐妹的列表来做到这一点。这个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，因为我有整个滑块，但我试图在这里发布更相关的位。不知道为什么那些拇指边界不起作用。第一个应该在加载时处于活动状态。

Answer 1

您正在使用.（类）选择器为只有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
    });

});

Working example here

更新

在您的网站上无法使用的原因是以下因为<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的其他库

在分配单击元素不起作用时从兄弟中删除类

1 个答案:

更新