jQuery+CSS实现的标签页效果示例【测试可用】

2019/6/29 21:44:46

编程Tag： jQuery 标签页 css

本文主要是介绍jQuery+CSS实现的标签页效果示例【测试可用】，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

本文实例讲述了jQuery+CSS实现的标签页效果。分享给大家供大家参考，具体如下：

CSS代码：

#tabs{
  width:600px;
  height:250px;
  background:white;
  margin:20px;
}
#tabs ul{
  float:left;
  margin:20px 0 0 20px;
  padding:0;
}
#tabs li{
  width:80px;
  height:40px;
  line-height:40px;
  display:inline-block;
  text-align:center;
  border-bottom:1px solid grey;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  background:#eeeeee;
  position:relative;
  top:1px;
}
#tabs li:hover{
  color:#aaaaaa;
  cursor:pointer;
}
.items{
  width:560px;
  height:175px;
  font-size:16px;
  text-align:center;
  border:1px solid grey;
  float:left;
  margin-left:20px;
}

jQuery代码：

$(document).ready(function(){
  $("li").bind("click",function(){
    $(".items").hide();
    $("#"+$(this).attr("name")).show();
    $("li").css({
      "border-top":"1px solid white",
      "border-left":"1px solid white",
      "border-right":"1px solid white",
      "border-bottom":"1px solid grey",
      "background":"#eeeeee"
    });
    $(this).css({
      "border-top":"1px solid grey",
      "border-left":"1px solid grey",
      "border-right":"1px solid grey",
      "border-bottom":"1px solid white",
      "background":"white"
    });
  });
  $("li:first-child").click();
});

HTML部分代码：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div id="tabs">
  <ul>
    <li name="lst1">标签1</li>
    <li name="lst2">标签2</li>
    <li name="lst3">标签3</li>
    <li name="lst4">标签4</li>
  </ul>
  <div class="items" id="lst1">内容1</div>
  <div class="items" id="lst2">内容2</div>
  <div class="items" id="lst3">内容3</div>
  <div class="items" id="lst4">内容4</div>
</div>

这里使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.zyiz.net/code/WebCodeRun，测试运行效果如下：

感兴趣的朋友可以动手测试一下看看效果如何。

PS：或者还可以将上述代码组合成完成的HTML页面，再使用在线HTML/CSS/JavaScript代码运行工具：http://tools.zyiz.net/code/HtmlJsRun，测试运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

这篇关于jQuery+CSS实现的标签页效果示例【测试可用】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery+CSS实现的标签页效果示例【测试可用】

相关编程文章