2012-03-19 8 views
0
<!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> 

このコードは最初のイメージを返します。イメージを2番目のイメージのようにするにはどうすればよいですか?スタイリングは、私が唯一のタブが適切に第二の画像のようにこのjQueryアコーディオンコードの何が問題なのですか?

最初のイメージを整列させたい、しかし重要ではありません - >enter image description here

第二の画像 - >enter image description here

+0

いくつかのCSSの男を使用してください! – mVChr

+0

@mVChrどうすればいいのか分かりませんが、私をここで助けてください...:p –

答えて

2

accordiを参照してください。うまくいく。あなたはちょうどいくつかの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

0

は、次のスタイルとタブを追加します。あなたが希望として表示されます...

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

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

関連する問題