jQuery制作网页版选项卡

时间：2021-05-26

网页选项卡可以较好的利用有限的页面来展示更多的元素，而使用JQuery来制作网页选项卡也是一件非常简单的事情。今天就来分享一个网页选项卡的制作小技巧。

◦引入所需库
◦选项卡原理
◦业务核心
◦完整小例子

引入所需库

这个知识点很基础，但是为了照顾fresh man ,我还是写一下吧。

选项卡原理

选项卡出现其实只是某一个div获取到了显示的权限，其他的没有显示而已。
•网页代码

<div class="tab"> <div class="tab_menu"> <ul> <li class="selected">选项卡1</li> <li>选项卡2</li> <li>选项卡3</li> </ul> </div><br><br><br> <div class="tab_box"> <div>选项卡1:这里是1号内容区域</div> <div class="hide">选项卡2：这里是2号内容区域</div> <div class="hide">选项卡3：这里是3号内容区域</div> </div></div>

•添加点样式元素

•JQuery控制

业务核心

里面最关键的其实还是最为基础的JQuery选择器的使用，然后我们就可以动态的改变页面上的元素，从而实现我们想要的效果。这也是JQuery的强大之处。

这里比较有技巧性的就是通过对ul li样式的变换，实现了类似于导航栏的效果。我们可以借鉴到今后的开发之中。这是一个非常实用的小技巧。

// 使得UL中的li标签水平排列 ul { display:inline; white-space: nowrap; } li { margin:3px; float:left; background:red; display:inline-block; }

完整小例子

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Tab Host Demo</title> <script type="text/javascript" src="jquery-2.2.4.min.js"></script> <style> // 使得UL中的li标签水平排列 ul { display:inline; white-space: nowrap; } li { margin:3px; float:left; background:red; display:inline-block; } .tab_menu { list-style:none; margin: 0px; padding: 0px; width: auto; } .tab_box { background-color: #465c71; border: 1px #4e667d solid; color: #dde4ec; display: block; line-height: 1.35em; padding: 4px 20px; text-decoration: none; white-space: nowrap; } .selected { background-color: green; display: block; } .hide { display: none; } </style></head><body><div class="tab"> <div class="tab_menu"> <ul> <li class="selected">选项卡1</li> <li>选项卡2</li> <li>选项卡3</li> </ul> </div><br><br><br> <div class="tab_box"> <div>选项卡1:这里是1号内容区域</div> <div class="hide">选项卡2：这里是2号内容区域</div> <div class="hide">选项卡3：这里是3号内容区域</div> </div></div><script> // 加上鼠标的点击效果 $(function(){ $("ul li").click(function(){ $(this).addClass("selected").siblings().removeClass("selected"); var index = $("ul li").index(this); $("div.tab_box > div").eq(index).show().siblings().hide(); }) }) // 加上鼠标悬浮效果 $(function(){ $("div.tab_menu ul li").hover(function(){ $(this).addClass("selected").show(); // 下面的这个可以实现选项卡的联动效果 var index = $("ul li").index(this); $("div.tab_box > div").eq(index).show().siblings().hide(); },function(){ $(this).removeClass("selected").show(); // 下面的这个可以实现选项卡的联动效果 var index = $("ul li").index(this); $("div.tab_box > div").eq(index).show().siblings().hide(); }) })</script></body></html>

实现的效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

jQuery制作网页版选项卡

相关文章

jQuery网页选项卡插件rTabs用法实例分析

jQuery实例—选项卡的简单实现(js源码和jQuery)

Angularjs实现mvvm式的选项卡示例代码

jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

jquery实现通用的内容渐显Tab选项卡效果