jQuery制作网页版选项卡

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

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

引入所需库

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

选项卡原理

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

 
  
    

      
选项卡1
      
选项卡2
      
选项卡3
    
  



  
    选项卡1:这里是1号内容区域
    选项卡2：这里是2号内容区域
    选项卡3：这里是3号内容区域
  

 •添加点样式元素 

    // 使得UL中的li标签水平排列
    ul {
      display:inline;
      white-space: nowrap;
    }
    li {
      margin:3px;
      float:left;
      background:red;
      // 这样可以防止li标签出现换行的显示
      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;
    }
  

 •JQuery控制

业务核心

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

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

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

完整小例子

 
 
 
 

  // 使得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;
  }
 



 
  

   
选项卡1
   
选项卡2
   
选项卡3
  
 



 
  选项卡1:这里是1号内容区域
  选项卡2：这里是2号内容区域
  选项卡3：这里是3号内容区域
 

实现的效果如下：

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