Question

代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 拖动（Draggable） - 视觉反馈</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <style>
  #draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  #draggable, #draggable2, #draggable3 { margin-bottom:20px; }
  #set { clear:both; float:left; width: 368px; height: 120px; }
  p { clear:both; margin:0; padding:1em 0; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable({ helper: "original" });
    $( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
    $( "#draggable3" ).draggable({
      cursor: "move",
      cursorAt: { top: -12, left: -20 },
      helper: function( event ) {
        return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
      }
    });
    $( "#set div" ).draggable({ stack: "#set div" });
  });
  </script>
</head>
<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuery Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
    <script>
         $( "#accordion" ).accordion({
  active: 1
});
var active = $( "#accordion" ).accordion( "option", "active" );

$( "#accordion" ).accordion( "option", "active", 2 );
    </script>
</body>
</html>

在脚本部分中，您可以看到var active = $( "#accordion" ).accordion( "option", "active" );在初始化和选项方法之间写入的内容。任何人都可以解释这一步意味着什么吗？

Answer 1

根据jquery-ui accordion's active选项文档， active选项的值指定当前打开的面板。

请在代码中查看以下代码：

....
............
<script>
$( "#accordion" ).accordion({
  active: 1//the currently acitve tab section of the accordion (the active one which is currently opened up). The index starts from 0
});

//Getter method
var active = $( "#accordion" ).accordion( "option", "active" );
alert('active = '+active);//here it will alert the index of the currently open panel
$( "#accordion" ).accordion( "option", "active", 2);//set the index of the accordion tab to be activated, currently set to "2" so the third tab would be activ and open
</script>
.......
....
...

希望您现在已经清楚了解所提供的解释。

手风琴

1 个答案: