1

希望大家能帮忙:)

我的网站上有一个侧边栏，但是因为我不希望它被折叠起来，所以我想将这 10 li 侧边栏分成两个 5 li 侧边栏，它们之间有一个 div，使用 Jquery 显示内容。我已经对网站进行了编码，所以它看起来不错，但是我需要侧边栏充当一个菜单而不是两个，因此一次只能进行一个选择，一个当前课程等。有人知道该怎么做吗？我的标记如下：

<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

You just have to remove tags that commented in the following code:

<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>

Edited: To get three columns layout, I will use CSS framework as follows:

<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 个单独的分区和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 回答