Bearbeiten von Registerkarten HTML/jQuery

Question

Ich brauche Hilfe in create template html - Ich möchte 7 Tabs zur rechten, linken und Fußseite hinzufügen, aber ich weiß nicht, wie machen Sie das. Vielen Dank im Voraus! hier Code:

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> 

Ich werde v sein sehr dankbar für deine Hilfe.

Answer 1

Können Sie keine Bibliothek wie bootstrap oder Material für die Erstellung verwenden? Oder Sie können Material With Angular verwenden. Die Verwendung eines Frameworks ist hilfreich und hilfreich, wenn es um Community-Hilfe und Dokumentation geht.