为什么这个面板不工作？

看看这里的代码，你会看到我只是做了一些与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

为什么这个面板不工作？

回答

相关问题