网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情。今天就来分享一个网页选项卡的制作小技巧。
◦引入所需库
◦选项卡原理
◦业务核心
◦完整小例子
引入所需库
这个知识点很基础,但是为了照顾fresh man ,我还是写一下吧。
选项卡原理
选项卡出现其实只是某一个div获取到了显示的权限,其他的没有显示而已。
•网页代码
选项卡1:这里是1号内容区域选项卡2:这里是2号内容区域选项卡3:这里是3号内容区域
•添加点样式元素
•JQuery控制
业务核心
里面最关键的其实还是最为基础的JQuery选择器的使用,然后我们就可以动态的改变页面上的元素,从而实现我们想要的效果。这也是JQuery的强大之处。
这里比较有技巧性的就是通过对ul li样式的变换,实现了类似于导航栏的效果。我们可以借鉴到今后的开发之中。这是一个非常实用的小技巧。
// 使得UL中的li标签水平排列 ul { display:inline; white-space: nowrap; } li { margin:3px; float:left; background:red; display:inline-block; }
完整小例子
Tab Host Demo
选项卡1:这里是1号内容区域选项卡2:这里是2号内容区域选项卡3:这里是3号内容区域
实现的效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持全福编程网。