爲什麼這個面板不工作？

看看這裏的代碼，你會看到我只是做了一些與jQuery的實踐，並試圖建立一個選項卡面板。爲什麼這個面板不工作？

我被卡住了試圖讓部分移動的方式，一旦我點擊一個新的部分。

我不知道爲什麼這不適合我這樣工作。

<html> 
<head> 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 

    <div class="buttons"> 
    <a href="" class="active_button" data-sectionId="section1">Section 1</a> 
    <a href="" data-sectionId="section2">Section 2</a> 
    <a href="" data-sectionId="section3">Section 3</a> 
    <a href="" data-sectionId="section4">Section 4</a> 
    </div> 

    <div class="sections"> 

    <div class="section active_section" id="section1"> 
     Section 1 <br> 
     Section 1 <br> 
     Section 1 <br> 
     Section 1 <br><br> 
    </div> 

    <div class="section" id="section2"> 
     Section 2 <br> 
     Section 2 <br> 
     Section 2 <br> 
     Section 2 <br> <br> 
    </div> 

    <div class="section" id="section3"> 
     Section 3 <br> 
     Section 3 <br> 
     Section 3 <br> 
     Section 3 <br><br> 
    </div> 

    <div class="section" id="section4"> 
     Section 4 <br> 
     Section 4 <br> 
     Section 4 <br> 
     Section 4 <br><br> 
    </div> 

    </div> 

</body> 
</html>

青菜

body 
    text-align: center 
    padding-top: 50px 

a 
    color: white 
    text-decoration: none 
    padding: 10px 
    background-color: grey 
    margin: 0px -1px 
    border-radius: 10px 10px 0px 0px 
    transition: all 0.3s ease-in-out 
    &:hover 
    background-color: lightgrey 

.active_button 
    background-color: lightgrey 

.sections 
    position: relative 

.section 
    display: none 
    padding: 20px 
    background-color: lightgrey 
    position: absolute 
    width: 286px 
    top: 10px 
    left: 50% 
    margin-left: -163px 
    border-radius: 0 0 10px 10px 

.active_section 
    display: block

jQuery的

$(function() { 

    // capture click of section button 
    $("a").click(function(e) { 

    // prevent default link behaviour 
    e.preventDefault(); 

    // hide the current active section 
    $(".section .active_section").slideUp(500, function(){ 
     // then take away their active class 
     $(this).removeClass("active_section"); 
    }); 

    }); // click function closes here 


    // find out what section button is pressed 
    var sectionId = $("a").attr("data-sectionId"); 


    // slide down that section 
    $("#"+sectionId).slideDown(500, function(){ 
    // add the active class 
    $(this).addClass("active_section"); 
    }); 

});

來源

2015-09-30 Eli Tamosauskas

發生了什麼當你點擊？ – nowhere

當你編寫$（'。section .activeSection'）時 - 這意味着選擇一個具有類活動部分的元素，它是具有類部分的元素的子元素 – Taleeb

把你所有的代碼，點擊功能，它的工作;）

https://jsfiddle.net/pgytuq6j/

// capture click of section button 
$("a").click(function(e) { 

    // prevent default link behaviour 
    e.preventDefault(); 

    // find out what section button is pressed 
    var sectionId = $(this).attr("data-sectionId"); 

    // hide the current active section 
    $(".active_section").slideUp(500, function(){ 
     // then take away their active class 
     $(this).removeClass("active_section"); 
    }); 

    // slide down that section 
    $("#"+sectionId).slideDown(500, function(){ 
     // add the active class 
     $(this).addClass("active_section"); 
    }); 

}); // click function closes here

這是你想要的嗎？

來源

2015-09-30 14:03:34 Halvra

請檢查該

[https://jsfiddle.net/k2v06bnv/][1]

代碼小問題，你必須更加小心小東西

來源

2015-09-30 14:05:01 IbrahimAsad

DEMO

檢查JS

內嵌批註更新JS

$(function() { 
    $("a").click(function(e) { 
     e.preventDefault(); 
     $(".section.active_section").slideUp(500, function(){ 
      $(this).removeClass("active_section"); 
     }); 
     //You need to identify clicked element inside click event itself 
     //get the sectionId of clicked element using $(this) 
     var sectionId = $(this).attr("data-sectionId"); 
     $("#"+sectionId).slideDown(500, function(){ 
      $(this).addClass("active_section"); 
     }); 
    }); 
});

來源

2015-09-30 14:07:12

當您編寫$('.section .activeSection') - 這意味着選擇一個類爲activeSection的元素，它是具有class節的元素的子元素。另外，整個代碼應該是點擊事件中：

$("a").click(function (e) { 

    // prevent default link behaviour 
    e.preventDefault(); 
    var currentAnchor = $(this); 
    // hide the current active section 
    $(".active_section").slideUp(500, function() { 
     // then take away their active class 
     $(this).removeClass("active_section"); 
     $('.active_button').removeClass('active_button'); 
     $(currentAnchor).addClass('active_button'); 
    }); 

    // find out what section button is pressed 
    var sectionId = $(this).attr("data-sectionId"); 

    console.log(sectionId); 
    // slide down that section 
    $("#" + sectionId).slideDown(500, function() { 
     // add the active class 
     $(this).addClass("active_section"); 

    }); 
});

jsFiddle

來源

2015-09-30 14:08:17 Taleeb

DEMO

下面的功能會給你平滑過渡，而上下滑動

$(function() { 
    // capture click of section button 
    $("a").click(function(e) { 

    // prevent default link behaviour 
    e.preventDefault(); 

    // hide the current active section 
    $(".active_section").slideUp(500, function(){   
     // then take away their active class 
     $(this).removeClass("active_section");   
     // find out what section button is pressed 
    }); 

    var sectionId = $(this).attr("data-sectionId"); 

    setTimeout(function() { 
     // slide down that section 
     $("#"+sectionId).slideDown(500, function(){ 
      // add the active class 
      $(this).addClass("active_section"); 
     }); 
     }, 500);  
    }); // click function closes here 
});

來源

2015-09-30 14:38:20

爲什麼這個面板不工作？

回答

相關問題