基于jQuery实现选项卡效果 - [技术教程]

导航首页 » 技术教程 » 基于jQuery实现选项卡效果

全站头部文字我要出现在这里

基于jQuery实现选项卡效果 924 2024-02-06

选项卡，不多说了，做不做网络的都知道，我学的比较晚，现在发一个选项卡制作的代码

效果下图所示：

查看图片

源代码：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta name="keywords" content=" keywords" />
  <meta name="description" content="description" />
</head>
<script type="text/javascript" src="http://www.gimoo.net/t/1809/jquery-1.4.2.min.js"></script>
<style type="text/css">
  body{font-size:13px}
  ul,li{margin:0;padding:0;list-style:none}
  #menu li{text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer}
  #menu li.tabFocus{width:50px;font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative}
  #content{width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px}
  #content li{display:none}
  #content li.conFocus{display:block}
</style>
<body>
<script type="text/javascript">
  $(function(){
    $('#menu li').each(function(index){
      $(this).click(function(){
        $('#menu li.tabFocus').removeClass('tabFocus');
        $(this).addClass('tabFocus');
        $('#content li:eq('+index+')').show().siblings().hide();
      })
    });
  });
</script>
<ul id="menu">
  <li class="tabFocus">家居</li>
  <li>电器</li>
  <li>二手</li>
</ul>
<ul id="content">
  <li class="conFocus">这是家居的内容</li>
  <li>这是电器的内容</li>
  <li>这是家居的内容</li>
</ul>
</body>
</html>

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

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解！

文章分类