jquery-ui – jquery ui手风琴

前端之家收集整理的这篇文章主要介绍了jquery-ui – jquery ui手风琴前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在选项卡中使用手风琴时遇到问题,最初无效的手风琴在选择其选项卡时不会正确呈现其内容
阅读周围我看到的原因是,无效的选项卡显示:无最初,所以手风琴中的div的高度没有得到正确计算。没有一个建议的解决方案对我有用。
有没有人克服这个或有工作?

这里有一些问题的示例代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
  <script type='text/javascript' src='../scripts/jquery-1.3.2.min.js'></script>
  <script type='text/javascript' src='../scripts/jquery-ui-1.7.2.custom.js'></script> 

  <script type="text/javascript">
  $(document).ready(function(){
    $('#tabs').tabs();
    $("#accordion1").accordion();
    $("#accordion2").accordion(); 
  });
  </script>
</head>
<body style="font-size:62.5%;">
   <div id="main" class="round roundB">

<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab 1</a> </li>      
    <li><a href="#tab2">Tab 2</a> </li>
  </ul>

<div id="tab1">
  <div id="accordion1">
 <h3><a href="#">Section 1</a></h3>
 <div>
  <p>
  TAB 1 Accordion 1
  </p>
 </div>
 <h3><a href="#">Section 2</a></h3>
 <div>
  <p>
  TAB 1 Accordion 2
  </p>
 </div>
  </div>
</div>

<div id="tab2">
  <div id="accordion2">
 <h3><a href="#">Section 1</a></h3>
 <div>
  <p>
  TAB 2 Accordion 1
  </p>
 </div>
 <h3><a href="#">Section 2</a></h3>
 <div>
  <p>
  TAB 2 Accordion 2
  </p>
 </div>
  </div>
</div>
</div>

</div>
</body>
</html>

解决方法

我以前有同样的问题。
解决方案是:您必须在选项卡前激活手风琴。
$("#accordion").accordion();
$("#tabs").tabs();

也许你需要左对齐。

.ui-accordion-header{
  text-align: left;
}

祝你好运

原文链接:https://www.f2er.com/jquery/183832.html

猜你在找的jQuery相关文章