将html列表分成几个部分，然后在prev下按钮之间切换

时间：2017-10-23 07:24:51

标签： javascript jquery html css

正如你在小提琴中看到的那样，有一个包含许多项目和prev next按钮的列表。 我希望通过页面的未知宽度动态地将这些项目分组，因此总是只有一行，我可以使用prev下一个按钮在组之间切换。

https://jsfiddle.net/svz2fpue/2/

＆＃13;
＆＃13; 
ul.uiPageControlBar{
    padding:12px;
    padding-left:15px;
}

.uiPageControlTab{
    color: #007AC3;   
    @include HeadersFont();
    @include HandOnHover();
    font-size: 18px;
    padding-bottom: 3px;
    margin-bottom: 0;
    margin-right: 20px;
    text-decoration: none;

    &:hover:not([data-UIElement-disabled])  { 
        color: $SiteHoverColor;
    }
    &[data-UIElement-disabled]
    {
        background-color: $DisabledBackColor !important;
        color: $DisabledTextColor!important;

    }
}

.uiPageControlSelectedTab{    
    color: $SiteHoverColor;
    border-bottom: 5px solid;


    &:hover:not([data-UIElement-disabled]) 
    {
        border-color: $SiteHoverColor; 
        color: $SiteHoverColor;
    }


    &[data-UIElement-disabled]
    {
        background-color: $DisabledBackColor !important;
        color: $DisabledTextColor !important;

    }
}

a {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
}

a:hover {
    background-color: #ddd;
    color: black;
}

.previous {
    background-color: #4CAF50;
    color: white;
}

.next {
    background-color: #4CAF50;
    color: white;
}

.round {
    border-radius: 50%;
}
＆＃13; 
<ul class="uiPageControlBar">

<a href="#" class="previous round" style="display: inline">&#8249;</a>

<li style="display: inline">
    <a class="uiPageControlTab uiPageControlSelectedTab">General</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="1">Defaults</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="2">Setup</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="3">Financials</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="4">Status</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="5">Tax</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="6")>Misc. Charges</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="7">Quality</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="8">eCommerce</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="9">New eCommerce</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="10">Ext. Search</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="11">Repair Certificates</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="12">Spec 2000</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="13">SITA</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="14">External Sourcing Setup</a></li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="15">Preferences</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="16">Flight Reservation</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="17">Alternative Repairs</a>
</li>
<li style="display: inline">
    <a class="uiPageControlTab" data-index="18">CRM Case Status</a>
</li>

<a href="#" class="next round" style="display: inline">&#8250;</a>


</ul>
＆＃13;
＆＃13;
＆＃13;

我该怎么做？ TNX！

1 个答案:

答案 0 :(得分：1)

您可以将ul放在容器div中，并为ul指定一个非常大的宽度，并为容器div创建一个overflow:hidden。

在上一个/下一个按钮上使用jQuery，通过更改左侧位置来更改ul相对于div的位置：

＆＃13;
＆＃13; 
var pos = 0;

$(".next").on('click', function() {
  pos -= 100;
  $('ul').css('left', pos + "px");

})
$(".previous").on('click', function() {
  if (pos < 0)
    pos += 100;
  $('ul').css('left', pos + "px");
})
＆＃13; 
.content {
  margin: 0 30px;
  overflow: hidden;
}

ul {
  margin: 0;
  padding: 0;
  width: 9000px;
  position: relative;
  left: 0;
  transition: 0.5s;
}

a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  position: absolute;
  background-color: #4CAF50;
  color: white;
  top: 10px;
  z-index: 999;
}

.next {
  background-color: #4CAF50;
  color: white;
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 999;
}

.round {
  border-radius: 50%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="previous round" style="display: inline">&#8249;</a>
<div class="content">
  <ul class="uiPageControlBar">
    <li style="display: inline">
      <a class="uiPageControlTab uiPageControlSelectedTab">General</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="1">Defaults</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="2">Setup</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="3">Financials</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="4">Status</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="5">Tax</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="6" )>Misc. Charges</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="7">Quality</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="8">eCommerce</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="9">New eCommerce</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="10">Ext. Search</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="11">Repair Certificates</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="12">Spec 2000</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="13">SITA</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="14">External Sourcing Setup</a></li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="15">Preferences</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="16">Flight Reservation</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="17">Alternative Repairs</a>
    </li>
    <li style="display: inline">
      <a class="uiPageControlTab" data-index="18">CRM Case Status</a>
    </li>

  </ul>
</div>
<a href="#" class="next round" style="display: inline">&#8250;</a>
＆＃13;
＆＃13;
＆＃13;

这只是一个示例，您需要为jQuery代码添加更多处理，例如向变量pos添加更多测试，并根据页面宽度或要显示的元素数指定步骤，等

相关问题
最新问题