首页jquery垂直滑动选项卡.

jquery垂直滑动选项卡.

时间: 2024-01-03 11:21:38 浏览: 145

以下是一个基于jQuery的垂直滑动选项卡的示例代码： ```html <!DOCTYPE html> <html> <head> <title>垂直滑动选项卡</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> .tab { width: 200px; height: 300px; border: 1px solid #ccc; overflow: hidden; position: relative; } .tab ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tab ul li { height: 50px; line-height: 50px; padding-left: 20px; background-color: #f5f5f5; border-bottom: 1px solid #ccc; cursor: pointer; } .tab ul li.active { background-color: #fff; font-weight: bold; } .tab .content { position: absolute; top: 0; left: 200px; width: 400px; height: 300px; background-color: #fff; border: 1px solid #ccc; padding: 20px; } </style> <script type="text/javascript"> $(function() { $('.tab ul li').click(function() { var index = $(this).index(); $(this).addClass('active').siblings().removeClass('active'); $('.tab .content').eq(index).show().siblings('.content').hide(); }); }); </script> </head> <body> <div class="tab"> <ul> <li class="active">选项卡1</li> <li>选项卡2</li> <li>选项卡3</li> <li>选项卡4</li> <li>选项卡5</li> </ul> <div class="content"> <div>内容1</div> <div style="display: none;">内容2</div> <div style="display: none;">内容3</div> <div style="display: none;">内容4</div> <div style="display: none;">内容5</div> </div> </div> </body> </html> ``` 该示例代码实现了一个垂直滑动选项卡，当鼠标点击选项卡标签时，对应的内容会显示出来。你可以根据自己的需求修改样式和内容。

阅读全文