Jquery Tab 选项卡切换简单样式（二）_自定义tab滑动切换效果 jquery-CSDN博客

本文链接：https://blog.csdn.net/ruziwang/article/details/82216216

Jquery Tab 选项卡切换简单样式（二）

下方效果图和代码
copy下来，直接可以使用

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tab简单的选项卡切换</title>
</head>
<style>
.tab-box div{width:927px;height:130px;border:1px solid #000;display:none;}
/* 让第一个框显示出来 */
.tab-box {
    padding-top: 25px;
}
.checkIteam{padding-right: 10px;display:inline-block;}
.tab-box div:first-Child{display:block;}
/* 改变选项卡选中时候的样式 */
.change{background:#70ccf6;}
#tab-lab{
width:130px;height:24px;display:block;float:left;line-height:22px;color:#060606;border:1px solid #000; border-radius:5px 5px 0px 0px;
text-align:center;display:inline-block;
}
</style>
<body>
<table>
      <div class="tab">
          <div class="tab-menu" style="text-align:center;">
                  <lable id="tab-lab" name="doctype" value="0" onmouseover=mymouse(this)>无</lable>
                  <lable id="tab-lab" name="doctype" value="2" onmouseover=mymouse(this)>新闻中心</lable>
                  <lable id="tab-lab" name="doctype" value="3" onmouseover=mymouse(this)>评测中心</lable>
                  <lable id="tab-lab" name="doctype" value="1" onmouseover=mymouse(this)>行情中心</lable>
                  <lable id="tab-lab" name="doctype" value="4" onmouseover=mymouse(this)>导购中心</lable>
          </div>
          <div class="tab-box">
              <div>靠！奥巴马来我家了！！！^……^</div>
              <div>听说，你昨天去整容了，小伙！</div>
              <div>我昨天中了一个亿的彩票！</div>
	      <div>昨天梦见好多好多鱼,在我的床上游来游去！</div>
         </div>
      </div>
</table>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    // 获取默认选中的元素的下标
    var _index=$("lable[checked='checked']").index();
      // console.log($(this).html());
    //让内容框的第 _index 个显示出来，其他的被隐藏
    $(".tab-box>div").eq(_index).show().siblings().hide();
//改变选中时候的选项框的样式，移除其他几个选项的样式
  $("lable[checked='checked']").addClass("change").siblings().removeClass("change");
  // $(this).addClass("change").siblings().removeClass("change");
})

  function mymouse(id){
          var _index = $(id).index();
      //让内容框的第 _index 个显示出来，其他的被隐藏
      $(".tab-box>div").eq(_index).show().siblings().hide();
      //改变选中时候的选项框的样式，移除其他几个选项的样式
      $(".tab-menu>lable").eq(_index).addClass("change").siblings().removeClass("change");
      $(".tab-menu>lable").eq(_index).attr("checked","checked").siblings().removeAttr("checked");
      // var _checkinde = $("lable[checked='checked']").attr("value");
      // return _checkinde;

 }
</script>