Question

这是我第一次使用jQuery。我已经检查了很多次。我不知道为什么它不起作用。结果应该是手风琴。

也许有人能够注意到为什么它仍然稳定？ ;）

Answer 1

我不知道这个答案是否会让您满意...由于结果有效，但难看。

您刚刚有几次错别字：

缺少$符号
.slideDown()没有大写字母
在}之后的另外一个.addClass('active);
似乎您两次加载了jQuery。正确地在脚本前的<head> 和中：<script src="bower_components/jquery/jquery.js"></script>。（因此将其删除）。

我强烈建议您使用代码编辑器...如果您还没有的话。它使代码审查更加容易。

$(function() {
  $('.tab-panels .tabs li').on('click', function(){
    $('.tab-panels .tabs li.active').removeClass('active');
    $(this).addClass('active');
    var panelToShow = $(this).attr('rel');
    $('.tab-panels .panel.active').slideUp(300, showNextPanel);
    
    function showNextPanel(){
      $(this).removeClass('active');
      $('#'+panelToShow).slideDown(300, function () {
        $(this).addClass('active');
      });
    }
  });
});

ul {
list-style-type: none;
}
ul li {
  display: inline-block;
  padding: 25px;
  background-color: gray;
  border-radius: 20%;
  text-align: center;
  color: white;
}
.tab-panels .panel.active {
  display: block;
  width: 28%;
  text-align: center;
  padding: 20px 0 20px 0;
}
.tab-panels ul li:hover {
  background-color: black;
}
.tab-panels ul li:active {
  background-color: black;
}
.panel {
  display: none;
  background-color: yellow;
  height: 24%;
}

<html>
  
<head> 
  <title> task </title> 
  <link href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  </head>
  <body>
    <div class="tab-panels">
      <ul class="tabs"> 
        <li class="active" rel="panel1">numer 1 </li>
        <li rel="panel2">numer 2 </li>
        <li rel="panel3">numer 3 </li>
        <li rel="panel4">numer 4 </li>
      </ul>
     
    <div class="panel active" id="panel1">
    raz</br>
    text</br>
    text</br>
    text</br>
  text</br>
    text</br>    
    </div>
    <div class="panel" id="panel2">
    dwa</br>
    text</br>
    text</br>
    text</br>
  text</br>
    text</br>    
    </div>
    <div class="panel" id="panel3">
    trzy</br>
    text</br>
    text</br>
    text</br>
  text</br>
    text</br>    
    </div>
    <div class="panel" id="panel4">
    cztery</br>
    text</br>
    text</br>
    text</br>
  text</br>
    text</br>    
    </div>
</div>
 
  </body>
</html>

手风琴JQuery不起作用

1 个答案: