Javascript Вертикального алфавитного порядок naviguation

-1

Я хотел бы создать JavaScript на основе алфавитной навигации, как этот из Бразильского сайта лирики letras Javascript Вертикального алфавитного порядок naviguation

Может кто-нибудь объяснить мне концепцию позади? BIG THX ЗАРАНЕЕ

источник

2016-03-23 Nacim Idjakirene

Поместите свой список в массив и использовать arrayname.sort(). – durbnpoisn

, но как связать список с алфавитной панелью? –

В соответствии с example site вертикальной прокрутки осуществляется с помощью scrollspy штепсель в Так как в примере ниже, настроенное на основе использования вами с помощью начальной загрузки scrollspy

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <style> 
 
    body { 
 
     position: relative; 
 
    } 
 
    ul.nav-pills { 
 
     top: 20px; 
 
     position: fixed; 
 
    } 
 
    div.col-sm-9 div { 
 
     height: 250px; 
 
     font-size: 28px; 
 
    } 
 
    #section1 {color: #fff; background-color: #1E88E5;} 
 
    #section2 {color: #fff; background-color: #673ab7;} 
 
    #section3 {color: #fff; background-color: #ff9800;} 
 
    #section41 {color: #fff; background-color: #00bcd4;} 
 
    #section42 {color: #fff; background-color: #009688;} 
 
    
 
    @media screen and (max-width: 810px) { 
 
    #section1, #section2, #section3, #section41, #section42 { 
 
     margin-left: 150px; 
 
    } 
 
    } 
 
    </style> 
 
</head> 
 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <nav class="col-sm-3" id="myScrollspy"> 
 
     <ul class="nav nav-pills nav-stacked"> 
 
     <li class="active"><a href="#section1"> 
 

 
A</a></li> 
 
     <li><a href="#section2">B</a></li> 
 
     <li><a href="#section3">C</a></li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">D <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#section41">DE</a></li> 
 
      <li><a href="#section42">DF</a></li>      
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    <div class="col-sm-9"> 
 
     <div id="section1">  
 
     <h1>A</h1> 
 
     <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
 
     </div> 
 
     <div id="section2"> 
 
     <h1>B</h1> 
 
     <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
 
     </div>   
 
     <div id="section3">   
 
     <h1>C</h1> 
 
     <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
 
     </div> 
 
     <div id="section41">   
 
     <h1>Der </h1> 
 
     <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
 
     </div>  
 
     <div id="section42">   
 
     <h1>DF sagvsd</h1> 
 
     <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>         \t \t

источник

2016-03-23 14:37:32 anomepani

Awesome !! Большое спасибо –

Javascript Вертикального алфавитного порядок naviguation

ответ

Смежные вопросы