jQuery制作网页版选项卡

前端之家收集整理的这篇文章主要介绍了jQuery制作网页版选项卡前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

引入所需库

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

选项卡原理

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

  • 选项卡2
  • 选项卡3



  • Box">
    选项卡1:这里是1号内容区域
    内容区域
    内容区域

    添加点样式元素

    // 使得UL中的li<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>水平排列
    ul {
      display:inline;
      white-space: nowrap;
    }
    li {
      margin:3px;
      float:left;
      background:red;
      // 这样可以防止li<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>出现换行的<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>
      display:inline-block;
    }
    
    .tab_menu {
      list-style:none; /* 去掉ul前面的符号 */
      margin: 0px; /* 与外界元素的距离为0 */
      padding: 0px; /* 与内部元素的距离为0 */
      width: auto; /* 宽度根据元素<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>调整 */
    }
    .tab_<a href="/tag/Box/" target="_blank" class="keywords">Box</a> {
      background-color: #465c71; /* 背景色 */
      border: 1px #4e667d solid; /* 边框 */
      color: #dde4ec; /* <a href="/tag/wenzi/" target="_blank" class="keywords">文字</a>颜色 */
      display: block; /* 此元素将<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>为块级元素,此元素前后会带有换行符 */
      line-height: 1.35em; /* 行高 */
      padding: 4px 20px; /* 内部填充的距离 */
      text-decoration: none; /* <a href="/tag/buxianshi/" target="_blank" class="keywords">不显示</a>超<a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>下划线 */
      white-space: nowrap; /* 对于文本内的空白处,不会换行,文本会在在同一行上继续,直到遇到 <br> <a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>为止。 */
    }
    .selected {
      background-color: green;
      display: block;
    }
    .hide {
      display: none;
    }

    •JQuery控制

    // 加上鼠标的点击效果 $(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();
    })
    })

    业务核心

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

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

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

    完整小例子

    <Meta charset="utf-8"> Tab Host Demo

    实现的效果如下:

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

    猜你在找的jQuery相关文章