Question

我有10个以上的导航项，我想显示10个导航项，其余的将滚动移动，为此，我试图创建顶部和底部的按钮（图标），该按钮将滚动其余的顶部和底部的项垂直列表。

<ul class="nav nav-tabs" id="myTab" role="tablist">

     <span class="to-previous getPrevious">
         <i class="fa fa-angle-up"></i>
     </span>

     <li class="nav-item">
         <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab">1</a>
     </li>

     <li class="nav-item">
         <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab">2</a>
     </li>

     <li class="nav-item">
         <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab">3</a>
     </li>

     <li class="nav-item">
         <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab">4</a>
     </li>

     <span class="to-next getNext"><i class="fa fa-angle-down"></i></span>

     <span class="to-next getNext"><i class="fa fa-angle-down"></i></span>

</ul>

我期望输出，单击图标之一后，其余项目应该可见... 在上面的代码中，只有4个列表项，但应该超过50个。

先谢谢您

Answer 1

您仅想像就很难理解要实现的目标，但是我觉得这个Jquery插件应该会有所帮助。

https://www.jqueryscript.net/other/custom-scrollbar-scroll-panel.html

如何滚动显示垂直导航选项卡

1 个答案: