选项卡效果的菜单栏

欢迎指点！

样式效果是一样的：

 

 

 区别：

原理一（tabOne.html）：多个html文件之间的跳转。（多个html文件）

可以通过 https://littlehiuman.github.io/17-tabMenu/tabOne.html 查看效果。

原理二（tab1.html）： 显示隐藏某个元素。（一个html文件）

可以通过 https://littlehiuman.github.io/17-tabMenu/tab1.html 查看效果。

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

两个文件的css文件是一样的：

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
ul {
  margin: 0;
  padding: 0;
  padding-top: 7px;
  width: 700px;
  height: 53px;
  border-bottom: 1px solid #ddd;
}
li {
  list-style: none;
}
#wrap {
  width: 82%;
  height: 100%;
  padding: 0 100px;
}
.title{
  clear: both;
  overflow: auto;
}
.title li{
  float: left;
  margin-left: 10px;
  background: #fff;
  outline: 0;
  border: 1px solid #ddd;
  cursor: pointer;
}
.title li,
.title a {
  display: inline-block;
  width: 145px;
  height: 42px;
  font-size: 14px;
  line-height: 42px;
  vertical-align: baseline;
  text-align: center;
  text-decoration: none;
  color: #999;
}
.title li.active {
  background: #f39803;
  border-color: #f29803;
}
.title li.active,
.title li.active a {
  color: #fff;
}
.title li.active i {
  width: 15px;
  height: 8px;
  background: url('../graphs/1701.png') no-repeat;
  background-size: 100%;
  display: block;
  margin: 0 auto;
}

.con {
  padding: 10px;
}

 

原理一：多个html文件之间的跳转。 

以下是tabOne.html的代码， 

tabTwo.html，tabThree.html，tabFour.html的代码同理，只是active所在的li不同。

<div id="wrap">
  <ul class="title">
    <li class="active"><a href="tabOne.html">产品介绍</a><i></i></li>
    <li><a href="tabTwo.html">产品功能</a><i></i></li>
    <li><a href="tabThree.html">产品价格</a><i></i></li>
    <li><a href="tabFour.html">更多服务</a><i></i></li>
  </ul>
  <div class="con">
    内容内容内容内容内容内容1
  </div>
</div>

 

原理二：显示隐藏某个元素。 

HTML:

<div id="wrap">
  <ul class="title">
    <li class="active">产品介绍<i></i></li>
    <li>产品功能<i></i></li>
    <li>产品价格<i></i></li>
    <li>更多服务<i></i></li>
  </ul>
  <div class="con">
    内容内容内容内容内容内容1
  </div>
  <div class="con">
    内容内容内容内容内容内容2
  </div>
  <div class="con">
    内容内容内容内容内容内容3
  </div>
  <div class="con">
    内容内容内容内容内容内容4
  </div>
</div>

 

JAVASCRIPT:

var menus = document.querySelector('.title')
var oCon = document.querySelectorAll('.con')
var lis = menus.children;
for(var i = 0;i<lis.length;i++){
  lis[i]['data-index'] = i;
  oCon[i].style.display = 'none'
}
window.onload = onloadCon()
function onloadCon() {
  for (var i = 0; i < lis.length; i++) {
    if (hasClass(lis[i], 'active')) {
      oCon[i].style.display = 'block'
    }
  }
}

menus.onclick = function (event) {
  if(event.target.tagName === 'LI'){
    for(var i = 0;i<lis.length;i++){
      removeClass(lis[i], 'active')
      oCon[i].style.display = 'none'
    }
    addClass(lis[event.target['data-index']], 'active')
    oCon[event.target['data-index']].style.display = 'block'
  }
}

function hasClass(elem, cls) {
  cls = cls || ''
  if (cls.replace(/\s/g, '').length == 0) return false
  return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ')
}
function addClass(elem, cls) {
  if (!hasClass(elem, cls)) {
    elem.className += ' ' + cls
  }
}
function removeClass(elem, cls) {
  if (hasClass(elem, cls)) {
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' '
    while (newClass.indexOf(' ' + cls + ' ') >= 0) {
      newClass = newClass.replace(' ' + cls + ' ', ' ')
    }
    elem.className = newClass.replace(/^\s+|\s+$/g, '')
  }
}