利用jQuery实现一个简单Tab选项卡的切换

利用jQuery实现一个简单Tab选项卡的切换,代码非常简洁。完整记录一下,以备日后使用。JS代码如下:

$(function () {
    $(".tabbox .menubox ul li").hover(function () {
        $(this).addClass("active").siblings().removeClass("active");
        $(".tabbox .contentbox ul li").eq($(this).index()).show().siblings().hide();
    })
})

完整代码如下,可以直接复制看看运行效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现Tab选项卡菜单</title>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
* {
    margin: 0 auto;
    padding: 0;
}

.tabbox {
    width: 600px;
    margin-top: 20px;
}

.tabbox .menubox {
    width: 600px;
	height: 40px;
	border: none;
}

.tabbox .menubox ul {list-style: none;}

.tabbox .menubox ul li {
	width: 200px;
    height: 40px;
    box-sizing: border-box;
    float: left;
    line-height: 40px;
    text-align: center;
	border: 1px solid #ccc;
	list-style: none;
}

.tabbox .menubox ul li.active {
    border-bottom: 0;
}

.tabbox .contentbox {
    width: 600px;
    height: 300px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    text-align: center;
	border-top: none;
}

.tabbox .contentbox ul {
	list-style: none;
}

.tabbox .contentbox ul li {
    width: 600px;
    float: left;
    display: none;
    text-align: center;
    line-height: 200px;
	list-style: none;
}
.tabbox .contentbox ul li.selected {
    display: block;
}
</style>
<script>
$(function () {
    $(".tabbox .menubox ul li").hover(function () {
        $(this).addClass("active").siblings().removeClass("active");
        $(".tabbox .contentbox ul li").eq($(this).index()).show().siblings().hide();
    })
})
</script>
</head>
 
<body>
<div class="tabbox">
  <div class="menubox">
    <ul>
      <li class="active">北京</li>
      <li>上海</li>
      <li>南京</li>
    </ul>
  </div>
  <div class="contentbox">
  	<ul>
      <li class="selected">北京北京北京北京</li>
      <li>上海上海上海上海</li>
      <li>南京南京南京南京</li>
    </ul>
  </div>
</div>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *