Question

我使用过jquery标签和accordion。代码如下：

 <html>
 <head>
 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
 <script type="text/javascript" src="js/jquery.ui.core.js"></script>
 <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
 <script type="text/javascript" src="js/jquery.ui.resizable.js"></script>
 <script type="text/javascript" src="js/jquery.ui.tabs.js"></script>
 <script type="text/javascript" src="js/jquery.cookie.js"></script>
 <script type="text/javascript" src="js/chat.js"></script>

<link type="stylesheet" href="css/jquery.ui.dialog.css"></link>


<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-   ui.css"
rel="stylesheet" type="text/css" />
 <link type="stylesheet" href="styles/items.css"></link>
 </head>
 <script>   

 //tabs
$(function() {
    $( "#content-area" ).tabs();
    $("#content-area").resizable();
    $("#content-area").draggable();
});


   //button
$(function() {
    $( "button, input:submit, a", ".demo" ).button();
    //$( "a", ".demo" ).click(function() { return false; });
});

   //resizable box
   $(function() {
    $( "#item-list" ).accordion({
        fillSpace: true
    });
});
$(function() {
    $( "#item-list" ).resizable({
        minHeight: 140,
        resize: function() {
            $( "#item" ).accordion( "resize" );
        }
    });
});
  </script>

  </head>
  <body>
   <div class="demo">

  <div class="toolbar">
  <input value="AddItems" type="submit">
  <input value="LogOut" type="submit">
  </div>
  <br></br>

  <div id=content-area">
<ul>
    <li><a href="#tabs-1">catalog</a></li>
</ul>
<div id="jw">
    <p>hii</p>
</div>
  </div>
  <br></br>
  <div id="item-list" class="ui-widget-content">
<div id="items">
<h3><a href="#">ItemsList</a></h3>
<div>
    <p>item list here</p>
</div>
 </div>
  </div>   
 </div>
 </body>
 </html>

我的css文件有：

#content-area {
float:left
width: 350px;
height: 450px;
padding: 0.5em
}

#item-list {
float:right
width: 150px;
height: 150px;
padding: 0.5em;
 }

#item h3 {
text-align: center;
margin: 0;
}

当我运行应用程序选项卡并且手风琴盒是一个在另一个之下时。我希望选项卡位于左侧并且框位于右侧。即使我在css中指定了它，定位以及大小调整也不是应用

Answer 1

您是否考虑使用预先编写的内容，例如：http://nicolahibbert.com/demo/liteAccordion/或http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html或http://www.marghoobsuleman.com/jQuery-common-accordion。如果你搜索“水平手风琴jquery”，你将能够找到更多。

定位jquery选项卡和框时出现问题

1 个答案: