这个jQuery手风琴代码有什么问题？

Question

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    </head>

    <script>
        $(document).ready(function(){
            $('#accordion').accordion();
        });
    </script>

    <body>

        <ul id="accordion">
      <li>
        <a href="#">Header 1</a>
        <div>Wow, look at all this content that can be shown or hidden with a simple click!</div>
      </li>
      <li>
        <a href="#">Header 2</a>
        <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpatligula. Integer  
        vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut      
        bibendum velit enim eu lectus. Suspendisse potenti. </div>
      </li>
      <li>
        <a href="#">Header 3</a>
        <div>Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis.  
        Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.</div>
      </li>
    </ul>

    </body>
</html>

This code returns the first image, how do I make it to be like the second image? 此代码返回第一个图像，如何使其像第二个图像？ The styling doesn't matter though, I only want the tabs to be properly aligned like the second image 然而，样式并不重要，我只希望标签像第二张图像一样正确对齐

First image -> 第一张图片 - > 在此输入图像描述

Second image -> 第二张图片 - > 在此输入图像描述

Answer 1

The accordian works fine. 手风琴很好用。 You just need some CSS. 你只需要一些CSS。

ul {
    margin: 20px;
    border: 1px solid #00f; }
li a { 
    padding: 5px;
    background: #00f; 
    color: #fff; 
    text-align: center; 
    display: block; 
    text-decoration: none; 
    text-transform: uppercase;
    outline: none; }
 li div { padding: 20px; }

DEMO HERE 在这里演示

Answer 2

Add the following style and the tabs will appear as you desired... 添加以下样式，选项卡将根据需要显示...

<style>
#accordion li {
  display:inline;
  text-decoration: none;
}
</style>

See http://jsfiddle.net/neo108/yFeuJ/ 见http://jsfiddle.net/neo108/yFeuJ/

这个jQuery手风琴代码有什么问题？

问题描述

2 个解决方案

解决方案1
2 已采纳 2012-03-19 05:07:37

解决方案2
0 2012-03-19 04:56:20

这个jQuery手风琴代码有什么问题？

问题描述

2 个解决方案

解决方案1 2 已采纳 2012-03-19 05:07:37

解决方案2 0 2012-03-19 04:56:20

解决方案1
2 已采纳 2012-03-19 05:07:37

解决方案2
0 2012-03-19 04:56:20