自适应水平TAB选项卡效果

响应式的，可以调整浏览器大小或者手机查看效果

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>自适应水平TAB选项卡效果，响应式</title>
<link rel="stylesheet" href="http://www.freejs.net/demo/713/src/style.css">
<style>
.ah-tab-wrapper {position: relative;}
.ah-tab-wrapper *, .ah-tab-wrapper *:before, .ah-tab-wrapper *:after {box-sizing: border-box;margin: 0;padding: 0;}
.ah-tab {border-bottom: 1px solid #ebebeb;position: relative;white-space: nowrap;overflow: hidden;letter-spacing: -0.3em;}
.ah-tab::before, .ah-tab::after {bottom: 0;content: "";height: 100%;opacity: 0;position: absolute;z-index: 1;transition: opacity .3s;}
.ah-tab::before {left: -100%;width: 30px;background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%);background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%);background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);}
@media (min-width: 768px) {.ah-tab::before {width: 50px;}}
.ah-tab::after {right: 100%;width: 80px;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%);background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);}
.ah-tab-overflow-left::before {opacity: 1;left: 0;}
.ah-tab-overflow-right::after {opacity: 1;right: 0;}
.ah-tab-overflow-wrapper {position: absolute;width: 43px;height: 100%;right: 100%;opacity: 0;top: 0;z-index: 1;text-align: center;}
.ah-tab-overflow-wrapper[data-ah-tab-active="true"] {right: 0;opacity: 1;transition: opacity .3s;}
.ah-tab-overflow-wrapper:hover {z-index: 2;}
.ah-tab-overflow-menu {background: transparent url(images/ah-tab-overflow-menu.svg) center center no-repeat;background-size: 18px;display: inline-block;width: 100%;height: 100%;border: 0;cursor: pointer;transition: opacity .3s;opacity: .7;}
.ah-tab-overflow-wrapper:hover .ah-tab-overflow-menu {opacity: 1;}
.ah-tab-overflow-list {position: absolute;top: -10000%;right: 0;text-align: left;background-color: #fff;border: 1px solid #e9e9e9;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.09);list-style: none;transition: opacity .3s;opacity: 0;max-width: 290px;}
.ah-tab-overflow-list::after {content: " ";display: block;position: absolute;top: -14px;right: 14px;width: 0;height: 0;border: 7px solid transparent;border-bottom-color: #fff;}
.ah-tab-overflow-list::before {content: " ";display: block;position: absolute;top: -16px;right: 13px;width: 0;height: 0;border: 8px solid transparent;border-bottom-color: #cdcdcd;}
.ah-tab-overflow-wrapper:hover .ah-tab-overflow-list {top: 99%;padding: 10px 0;opacity: 1;}
.ah-tab-overflow-list:hover {display: block;}
.ah-tab-item {color: #8b8b8b;cursor: pointer;display: inline-block;letter-spacing: normal;transition: all .3s;text-decoration: none;font-size: 16px;}
.ah-tab>.ah-tab-item {border-bottom: 3px solid transparent;margin-right: 30px;padding: 15px 0;}
@media(min-width: 768px) {.ah-tab>.ah-tab-item {margin-right: 50px;}}
.ah-tab-item[data-ah-tab-active="true"] {color: #215393;}
.ah-tab>.ah-tab-item:hover {border-bottom: 3px solid #8b8b8b;}
.ah-tab>.ah-tab-item[data-ah-tab-active="true"] {border-bottom-color: #215393;}
.ah-tab-overflow-list>.ah-tab-item {border-left: 3px solid transparent;display: block;overflow: hidden;padding: 10px 20px;text-overflow: ellipsis;white-space: nowrap;}
.ah-tab-overflow-list>.ah-tab-item:hover {border-left-color: #8b8b8b;}
.ah-tab-overflow-list>.ah-tab-item[data-ah-tab-active="true"] {border-left-color: #215393;}
.ah-tab-content-wrapper {margin: 30px 0;}
.ah-tab-content {display: none;padding: 30px;border: 1px solid #ebebeb;}
.ah-tab-content[data-ah-tab-active="true"] {display: block;}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="http://www.freejs.net/demo/713/src/jquery.horizontalmenu.js"></script>
<script>$(function(){$('.ah-tab-wrapper').horizontalmenu({itemClick : function(item){$('.ah-tab-content-wrapper .ah-tab-content').removeAttr('data-ah-tab-active');
$('.ah-tab-content-wrapper .ah-tab-content:eq(' + $(item).index() + ')').attr('data-ah-tab-active', 'true');
return false; //if this finction return true then will be executed http request
}
});
});
</script>
<style>
body{ background-color: #f7f7f7; }
.content {margin: 150px auto;font-family: 'Roboto';padding: 0 15px;}
</style>
</head>
<body>
<div class="content">
 <div class="ah-tab-wrapper">
  <div class="ah-tab">
   <a class="ah-tab-item" data-ah-tab-active="true" href="">freejs.net</a>
   <a class="ah-tab-item" href="">Contacts</a>
   <a class="ah-tab-item" href="">Tab item with long name</a>
   <a class="ah-tab-item" href="">Password change</a>
   <a class="ah-tab-item" href="">Tab item</a>
  </div>
 </div>
 <div class="ah-tab-content-wrapper">
  <div class="ah-tab-content" data-ah-tab-active="true">
   <h2>http://www.freejs.net/</h2>
  </div>
  <div class="ah-tab-content">
   <h2>Contacts</h2>
  </div>
  <div class="ah-tab-content">
   <h2>Tab item with a long name</h2>
  </div>
  <div class="ah-tab-content">
   <h2>Password change</h2>
  </div>
  <div class="ah-tab-content">
   <h2>Tab item</h2>
  </div>
 </div>
</div>
</body>
</html>

提示:可以修改后运行.

<< [JS]js控制显示元素个数超出隐藏点击显示 >>

查看所有评论