编辑选项卡HTML/jQuery

Question

我需要帮助创建模板HTML - 我想添加7个选项卡到右页，左页和底页，但我不知道如何做到这一点。先谢谢你！代码在这里：

的jQuery：

var Nav = (function() { 
    var 
    nav   = $('.css-tab'), 
    section = $('.section'), 
    link  = nav.find('.css-tab__link'), 
    navH  = nav.innerHeight(), 
    isOpen = true, 
    hasT  = false; 

    var toggleNav = function() { 
    nav.toggleClass('css-tab--active'); 
    shiftPage(); 
    }; 


    var switchPage = function(e) { 
    var self = $(this); 
    var i = self.parents('.css-tab__item').index(); 
    var s = section.eq(i); 
    var a = $('section.section--active'); 
    var t = $(e.target); 

    if (!hasT) { 
     if (i == a.index()) { 
     return false; 
     } 
     a 
     .addClass('section--hidden') 
     .removeClass('section--active'); 

     s.addClass('section--active'); 

     hasT = true; 

     a.on('transitionend webkitTransitionend', function() { 
     $(this).removeClass('section--hidden'); 
     hasT = false; 
     a.off('transitionend webkitTransitionend'); 
     }); 
    } 

    return false; 
    }; 

    var keyNav = function(e) { 
    var a = $('section.section--active'); 
    var aNext = a.next(); 
    var aPrev = a.prev(); 
    var i = a.index(); 


    if (!hasT) { 
     if (e.keyCode === 37) { 

     if (aPrev.length === 0) { 
      aPrev = section.last(); 
     } 

     hasT = true; 

     aPrev.addClass('section--active'); 
     a 
      .addClass('section--hidden') 
      .removeClass('section--active'); 

     a.on('transitionend webkitTransitionend', function() { 
      a.removeClass('section--hidden'); 
      hasT = false; 
      a.off('transitionend webkitTransitionend'); 
     }); 

     } else if (e.keyCode === 39) { 

     if (aNext.length === 0) { 
      aNext = section.eq(0) 
     } 


     aNext.addClass('section--active'); 
     a 
      .addClass('section--hidden') 
      .removeClass('section--active'); 

     hasT = true; 

     aNext.on('transitionend webkitTransitionend', function() { 
      a.removeClass('section--hidden'); 
      hasT = false; 
      aNext.off('transitionend webkitTransitionend'); 
     }); 

     } else { 
     return 
     } 
    } 
    }; 

    var bindActions = function() { 
    link.on('click', switchPage); 
    $(document).on('ready', function() { 
     page.css({ 
     'transform': 'translateY(' + navH + 'px)', 
     '-webkit-transform': 'translateY(' + navH + 'px)' 
     }); 
    }); 
    $('body').on('keydown', keyNav); 
    }; 

    var init = function() { 
    bindActions(); 
    }; 

    return { 
    init: init 
    }; 

}()); 

Nav.init(); 

CSS：

* { 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: rgba(255,255,255,0); 
} 
body { 
    line-height: 1.5; 
    font-family: "futura-pt", 'Century Gothic', 'Arial', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
    color: #fff; 
    background: #1a1a1a; 
} 
a { 
    text-decoration: none; 
    color: inherit; 
} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
.css-tab { 
    will-change: transform; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 1; 
    background: #1a1a1a; 
    -webkit-transform: translateY(-100%); 
      transform: translateY(-100%); 
    -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.css-tab--active { 
    -webkit-transform: translateY(0); 
      transform: translateY(0); 
} 
.css-tab__list { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 
.css-tab__item { 
    -webkit-box-flex: 1; 
    -webkit-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
    position: relative; 
    -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.css-tab__item:hover { 
    opacity: 0.75; 
} 
.css-tab__thumb { 
    display: block; 
    height: 80px; 
    background: #dc143c; 
    -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.css-tab__thumb:before { 
    content: attr(data-letter); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
      transform: translate(-50%, -50%); 
    font-size: 70px; 
    text-transform: uppercase; 
    opacity: 0; 
} 
.css-tab__label { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
      transform: translate(-50%, -50%); 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: #e6e6e6; 
    margin: 0; 
} 
@media (max-width: 850px) { 
    .css-tab__label { 
    font-size: 14px; 
    } 
} 
@media (max-width: 720px) { 
    .css-tab__label { 
    display: none; 
    } 
    .css-tab__thumb { 
    height: 60px; 
    } 
    .css-tab__thumb:before { 
    font-size: 24px; 
    opacity: 0.7; 
    } 
} 
.tab-content { 
    height: 100vh; 
    will-change: transform; 
    -webkit-perspective: 400px; 
      perspective: 400px; 
    overflow: hidden; 
    -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.section { 
    will-change: transform; 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    height: 100vh; 
    overflow: hidden; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
     -ms-flex-align: center; 
      align-items: center; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
     -ms-flex-pack: center; 
      justify-content: center; 
    text-align: center; 
    background: #fff; 
    -webkit-transform: translateX(100%); 
      transform: translateX(100%); 
    -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); 
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.section--hidden { 
    -webkit-transform: translateX(-100%); 
      transform: translateX(-100%); 
} 
.section--active { 
    -webkit-transform: translateX(0) rotateY(0); 
      transform: translateX(0) rotateY(0); 
    z-index: 2; 
} 
.section__wrapper { 
    width: 100%; 
    max-width: 800px; 
    padding: 0 8vw; 
    position: relative; 
} 
.section__title { 
    margin: 0 0 25px 0; 
    font-size: 48px; 
    font-weight: normal; 
    text-transform: uppercase; 
    letter-spacing: 5px; 
} 
.section__title:before { 
    content: ''; 
    position: absolute; 
    top: 5rem; 
    left: 45%; 
    margin: auto; 
    width: 10%; 
    height: 2px; 
    background: #fff; 
} 
@media (max-width: 720px) { 
    .section__title { 
    font-size: 28px; 
    } 
    .section__title:before { 
    top: 3.25rem; 
    } 
} 
.section p { 
    margin: 0 0 25px 0; 
    font-family: 'Georgia'; 
    font-size: 18px; 
    color: #fff; 
    opacity: 0.55; 
} 
@media (max-width: 720px) { 
    .section p { 
    font-size: 16px; 
    } 
} 
.section p:last-child { 
    margin-bottom: 0; 
} 
.color1 { 
    background: #1b1f25; 
} 
.color2 { 
    background: #e74c3c; 
} 
.color3 { 
    background: #3498db; 
} 
.color4 { 
    background: #9b59b6; 
} 
.color5 { 
    background: #1bc885; 
} 
.color6 { 
    background: #dfb816; 
} 
.color7 { 
    background: #008B8B; 
} 
.logo { 
    position: fixed; 
    top: 100px; 
    right: 20px; 
    z-index: 2; 
} 
@media (max-width: 720px) { 
    .logo { 
    top: 110px; 
    right: 50%; 
    margin-right: -20px; 
    } 
} 
.logo img { 
    width: 45px; 
    -webkit-transform: rotate(0); 
      transform: rotate(0); 
    -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.logo img:hover { 
    -webkit-transform: rotate(180deg) scale(1.1); 
      transform: rotate(180deg) scale(1.1); 
} 

HTML：

<nav class="css-tab css-tab--active"> 
    <ul class="css-tab__list"> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color1" data-letter="1"></div> 
     <p class="css-tab__label">1</p> 
     </a> 
    </li> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color2" data-letter="2"></div> 
     <p class="css-tab__label">2</p> 
     </a> 
    </li> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color3" data-letter="3"></div> 
     <p class="css-tab__label">3</p> 
     </a> 
    </li> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color4" data-letter="4"></div> 
     <p class="css-tab__label">4</p> 
     </a> 
    </li> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color5" data-letter="5"></div> 
     <p class="css-tab__label">5</p> 
     </a> 
    </li> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color6" data-letter="6"></div> 
     <p class="css-tab__label">6</p> 
     </a> 
    </li> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color7" data-letter="7"></div> 
     <p class="css-tab__label">7</p> 
     </a> 
    </li> 
    </ul> 


    <a href="http://www.jquery-az.com" class="logo" target="_blank"> 
    <img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" /> 
    </a> 
</nav> 

<div class="tab-content"> 
    <section class="section section--active color1" data-letter="a"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">1</h1> 
     <section id="about"> 
       <h2><a href="#about">1</a></h2> 
       <p>Test 
       </p> 
      </section> 
    </article> 
    </section> 
    <section class="section color2" data-letter="p"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">2</h1> 
     <p>2</p> 
    </article> 
    </section> 
    <section class="section color3" data-letter="q"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">3</h1> 
     <p>3</p> 
    </article> 
    </section> 
    <section class="section color4" data-letter="e"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">4</h1> 
     <p>4</p> 
    </article> 
    </section> 
    <section class="section color5" data-letter="s"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">5</h1> 
     <p>5</p> 
    </article> 
    </section> 
    <section class="section color6"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">6</h1> 
     <p>7</p> 
    </article> 
    </section> 
    <section class="section color7"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">7</h1> 
     <p>7</p> 
    </article> 
    </section> 
</div> 

我会是V非常感谢您的帮助。

Answer 1

难道你不能使用像bootstrap这样的图书馆或材料来创建它吗？或者你可以使用Material With Angular。在涉及社区帮助和文档时，使用框架非常方便且更有帮助。