Перейти к следующей кнопке привязки - PullRequest
Новая
       56

Перейти к следующей кнопке привязки

0 голосов
/ 27 апреля 2011

Я настроил несколько якорей и небольшое меню вверху.когда я щелкаю по пункту меню, он прокручивается до этой привязки.

я хочу, чтобы в меню была указана следующая стрелка, чтобы определить следующую привязку на моей странице, и выделите ее при нажатии.

Мои якоря: #header, # box1 - # box5

Я хотел бы сделать это с помощью JavaScript, если это возможно.вот моя страница
Моя страница

Ответы [ 2 ]

1 голос
/ 27 апреля 2011

Существует коллекция HTML, которая называется document.anchors.Чтобы перейти к следующей привязке, получите текущее имя привязки из URL и найдите его в document.anchors.Если вы найдете его, следующий будет следующий индекс.Если вы на последнем указателе, установите привязку на первый.В противном случае, если совпадений нет, просто установите его на первое.

Это позволяет использовать любую схему для именования якорей, они будут посещаться в порядке их появления в DOM.

Например 

<head>
<!-- Hide script-dependent content -->
<style type="text/css">
.requiresScript-block, .requiresScript-inLine {
  display: none; 
}
div.spacer {
  height: 500px;
  border: 1px solid blue;
}
</style>
<script type="text/javascript">

function goToNextAnchor() {
  var anchors = document.anchors;
  var loc = window.location.href.replace(/#.*/,'');
  var nextAnchorName;

  // Get name of the current anchor from the hash
  // if there is one
  var anchorName = window.location.hash.replace(/#/,'');

  // If there is an anchor name...
  if (anchorName) {

    // Find current element in anchor list, then
    // get next anchor name, or if at last anchor, set to first
    for (var i=0, iLen=anchors.length; i<iLen; i++) {
      if (anchors[i].name == anchorName) {
        nextAnchorName = anchors[++i % iLen].name;
        break;
      }
    }
  }

  // If there was no anchorName or no match,
  // set nextAnchorName to first anchor name
  if (!nextAnchorName) {
    nextAnchorName = anchors[0].name;
  }

  // Go to new URL
  window.location.href = loc + '#' + nextAnchorName;
}

// Display script-dependent content if javascript available
document.write(
  '\u003Cstyle type="text/css"\u003e' +
  '.requiresScript-block {display: block;}' +
  '.requiresScript-inLine {display: inline;}' +
  '\u003C/style\u003e'
);
</script>
</head>
<body>
  <ol>
    <li><a href="#header">Go to header</a>
    <li><a href="#box1">Go to box 1</a>
    <li><a href="#box2">Go to box 2</a>
    <li><a href="#box3">Go to box 3</a>
    <li><a href="#box4">Go to box 4</a>
    <li><a href="#box5">Go to box 5</a>
  </ol>

  <!-- Only shown if javascript available -->
  <button class="requiresScript-inLine" onclick="goToNextAnchor()">Next</button>

  <a name="header"></a><h1>Header</h1>
  <div class="spacer">content</div>
  <p><a name="box1"></a><p>Box 1</p>
  <div class="spacer">content</div>
  <p><a name="box2"></a><p>Box 2</p>
  <div class="spacer">content</div>
  <p><a name="box3"></a><p>Box 3 </p>
  <div class="spacer">content</div>
  <p><a name="box4"></a><p>Box 4</p>
  <div class="spacer">content</div>
  <p><a name="box5"></a><p>Box 5</p>
</body>
0 голосов
/ 27 апреля 2011

Что-то, используя onClick в вашем HTML: 

<a href="#" onclick="goToNext();return false;">===></a>

... и затем JavaScript: 

var max = 5;

function goToNext() {
    var hash = String(document.location.hash);
    if (hash && hash.indexOf(/box/)) {
        var newh = Number(hash.replace("#box",""));
        (newh > max-1) ? newh = 0 : void(null);
        document.location.hash = "#box" + String(newh+1); 
    } else {
        document.location.hash = "box1";        
    }
}

Измените max наибольшее число, которое вы хотите использовать (дляbox1, box2 и т. Д.).Не уверен, что анимация сохранится, но вы можете взглянуть на пример здесь .Просто посмотрите адресную строку.

...