1

皆さんが助けてくれることを願っています:)

私は自分のウェブサイトにサイドバーを持っていますが、折り畳み下に置きたくないので、この 10 li サイドバーを 2 つの 5 li サイドバーに分割し、その間に Jquery を使用してコンテンツを表示する div を配置したいと考えています。見栄えが良いようにウェブサイトをコーディングしましたが、サイドバーが2つではなく1つのメニューとして機能する必要があるため、一度に1つの選択しかできず、現在のクラスは1つだけです。誰もこれを行う方法を知っていますか? 私のマークアップは次のとおりです。

<div id="sidebar">
<ul class="list2"><em>
    <li class="current1"><a href="#tab1">Bilgorajski</a></li>
    <li><a href="#tab2">Rzeszowski</a></li>
    <li><a href="#tab3">Kasuby</a></li>
    <li><a href="#tab4">Mazur</a></li>
    <li><a href="#tab5">Lubelski</a></li>
    </em>   
</ul>
</div>

<div id="repcontent">

</div>


<div id="sidebar">
<ul class="list2"><em>
    <li><a href="#tab6">Powislainski</a></li>
    <li><a href="#tab7">Podhalainski</a></li>
    <li><a href="#tab8">Kujuwiak Oberek</a></li>
    <li><a href="#tab9">Krakowiak</a></li>
    <li><a href="#tab10">Szlansk</a></li>
    </em>   
</ul>
</div>
4

2 に答える 2

0

次のコードでコメントしたタグを削除するだけです。

<div id="sidebar">
<ul class="list2"><em>
    <li class="current1"><a href="#tab1">Bilgorajski</a></li>
    <li><a href="#tab2">Rzeszowski</a></li>
    <li><a href="#tab3">Kasuby</a></li>
    <li><a href="#tab4">Mazur</a></li>
    <li><a href="#tab5">Lubelski</a></li>
    </em>   
</ul>
<!-- </div> -->

<div id="repcontent">

</div>


<!-- <div id="sidebar"> -->
<ul class="list2"><em>
    <li><a href="#tab6">Powislainski</a></li>
    <li><a href="#tab7">Podhalainski</a></li>
    <li><a href="#tab8">Kujuwiak Oberek</a></li>
    <li><a href="#tab9">Krakowiak</a></li>
    <li><a href="#tab10">Szlansk</a></li>
    </em>   
</ul>
</div>

編集: 3 つの列のレイアウトを取得するには、次のように CSS フレームワークを使用します。

<body>
<div id="header" class="row">
 <div class="twelve columns">
Header
 </div>
</div>
<div class="row">
 <div id="left-sidebar" class="three columns">
   <ul class="list2"><em>
    <li class="current1"><a href="#tab1">Bilgorajski</a></li>
    <li><a href="#tab2">Rzeszowski</a></li>
    <li><a href="#tab3">Kasuby</a></li>
    <li><a href="#tab4">Mazur</a></li>
    <li><a href="#tab5">Lubelski</a></li>
    </em>   
   </ul>
  </div>
 <div id="repcontent" class="six columns">
  Middle contents
 </div>
 <div id="right-sidebar" class="three columns">
 <ul class="list2"><em>
    <li><a href="#tab6">Powislainski</a></li>
    <li><a href="#tab7">Podhalainski</a></li>
    <li><a href="#tab8">Kujuwiak Oberek</a></li>
    <li><a href="#tab9">Krakowiak</a></li>
    <li><a href="#tab10">Szlansk</a></li>
    </em>   
  </ul>

 </div>
</div>
</body>
于 2013-01-13T12:46:32.063 に答える
0

気楽に..使って

-webkit-column-count: 2;

これにより、コンテンツが 2 つの列に分割されます。または、サイドバーを 2 つの側面に別々に表示する場合は、2 つの別々の分割とfloat:left|right;を使用します。財産。または、JQuery を使用してこれを照会することもできます。

    <body>
  <div class="container">
 <div class="sidebar1">
<ul class="nav">
  <li><a href="#">Link one</a></li>
  <li><a href="#">Link two</a></li>
  <li><a href="#">Link three</a></li>
  <li><a href="#">Link four</a></li>
</ul>
<p>  </p>
<!-- end .sidebar1 --></div>
 <div class="content">

<!-- end .content --></div>
<div class="sidebar2">
<!-- end .sidebar2 --></div>
<!-- end .container --></div>
</body>

CSS

  .sidebar1 {
float: left;
width: 20%;
background-color: #93A5C4;
padding-bottom: 10px;
   }
 .content {
padding: 10px 0;
width: 60%;
float: left;
 }
 .sidebar2 {
float: left;
width: 20%;
background-color: #93A5C4;
padding: 10px 0;
}

このコードを試してください。これにより、問題が明確になる場合があります。

于 2013-01-13T12:19:23.370 に答える