Javascript 垂直字母顺序导航 [英] Javascript Vertical alphabetical order naviguation

查看：59
本文介绍了Javascript 垂直字母顺序导航的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个基于 javascript 的字母导航，比如来自巴西歌词网站 letras

谁能解释一下背后的概念?提前大喜

解决方案

根据 示例站点 垂直滚动是使用 scrollspy 插件实现的因此，按照下面的示例，它是根据您使用 bootstrap scrollspy 的使用情况来定制的 

<html lang="zh-cn"><头><title>引导程序示例</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><风格>身体 {位置:相对；}ul.nav-pills {顶部:20px；位置:固定；}div.col-sm-9 div {高度:250px；字体大小:28px；}#section1 {颜色:#fff;背景颜色:#1E88E5;}#section2 {颜色:#fff;背景色:#673ab7;}#section3 {颜色:#fff;背景颜色:#ff9800;}#section41 {颜色:#fff;背景颜色:#00bcd4;}#section42 {颜色:#fff;背景颜色:#009688;}@media 屏幕和(最大宽度:810px){#section1, #section2, #section3, #section41, #section42 {左边距:150px；}}</风格><body data-spy="scroll" data-target="#myScrollspy" data-offset="20"><div class="容器"><div class="row"><nav class="col-sm-3" id="myScrollspy"><ul class="nav nav-pills nav-stacked"><li class="active"><a href="#section1"></a></li><li><a href="#section2">B</a></li><li><a href="#section3">C</a></li>
  • <a class="dropdown-toggle" data-toggle="dropdown" href="#">D <span class="caret"></span></a><ul class="下拉菜单"><li><a href="#section41">DE</a></li><li><a href="#section42">DF</a></li>
    • </nav><div class="col-sm-9"><div id="section1"><h1>A</h1><p>尝试滚动此部分并在滚动时查看导航列表！</p>

    <div id="section2"><h1>B</h1><p>尝试滚动此部分并在滚动时查看导航列表！</p>

    <div id="section3"><h1>C</h1><p>尝试滚动此部分并在滚动时查看导航列表！</p>

    <div id="section41"><h1>Der </h1><p>尝试滚动此部分并在滚动时查看导航列表！</p>

    <div id="section42"><h1>DF sagvsd</h1><p>尝试滚动此部分并在滚动时查看导航列表！</p>

    </html>

    I would like to create a javascript based alphabetical navigation like this one from a brasilian lyrics website letras

    Can anyone explain me the concept behind ? BIG THX IN ADVANCE

    解决方案

    As per example site vertical scroll is implemented using scrollspy plug in So as per example below, it is customized based on your use using bootstrap 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>

    这篇关于Javascript 垂直字母顺序导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆