0

我有一个有序列表

<li id="prev">
    <a href="#fragment-1>Next</a>
</li>

我想将href值增加到 

<a href="#fragment-1">...
<a href="#fragment-2">...
<a href="#fragment-3">...
<a href="#fragment-4">...

单击下一个时，它应该从 4 停止并返回到 1 allso 是否可以使用 javascript

谢谢

4

5 回答 5

3

先给你的链接id，使它更容易选择。

然后，

document.getElementById('the_id_here').addEventListener('click', function(e) {
    var n = e.target.href.split('-')[1] * 1 + 1;
    if (n > 4)
        n = 1;
    e.target.href = e.target.href.split('-')[0] + '-' + n;
}, false);

示例：http: //jsbin.com/ajegaf/4#fragment-1

于 2012-04-13T09:33:55.153 回答
0

使用隐藏字段来保存值，并使用 onclick 函数来增加它并提交表单。请参阅：如何通过激活按钮来增加数字，以便每次增加按钮时都能够访问功能？

 <?

 if(!isset($_GET['count'])) {
  $count = 0;
  } else {
  $count = $_GET['count'];
  }

  ?>

   <script type='text/javascript'>
   function submitForm(x) {
     if(x == 'prev') {
     document.getElementById('count').value--;
     } else {
     document.getElementById('count').value++;
     }

     document.forms["form"].submit();
   }
   </script>

   <form action='hidfield.php' method='get' name='form'>
   <input type='hidden' name='count' id='count' value='<?php echo $count; ?>'>
   </form>

   <input type='submit' name='prev' value='prev' onclick="submitForm('prev')">
   <input type='submit' name='next' value='next' onclick="submitForm('next')">
于 2012-04-13T16:16:46.373 回答
0

不完全是您想要的，但应该足够接近以将您瞄准正确的方向，请查看http://jsfiddle.net/pj28v/

<ul id="list"></ul>
<a href="#" id="next">Next</a>​

$(function() {

    var $list = $('#list'),
        count = 4,
        i = 0,
        cur = 0;

    for (; i < count; i++) {
        $list.append('<li><a href="#fragment' + i + '">frag' + i + '</a></li>');
    }

    $('a', $list).eq(0).css('color','red');

    $('#next').click(function(ev) {
        ev.preventDefault();
        cur++;
        if (cur >= count) cur = 0;
        $('a', $list).css('color','blue').eq(cur).css('color','red');
    });
});​
于 2012-04-13T09:40:48.617 回答
0

一个jQuery解决方案：

$(document).ready(function(){

    $('#prev a').click(function(){

        var href = $(this).attr('href');
        var num = parseInt(href.substr(href.indexOf('-') + 1));

        if(num == 4)
        {
            num = 1;
        }
        else
        {
            num++;
        }

        $(this).attr('href', '#fragment-' + num)
    });

});​

http://jsfiddle.net/UYDdB/

于 2012-04-13T09:41:46.097 回答
0

一种类似于 Delan 的解决方案，但使用 jQuery 并且不使用测试。http://jsfiddle.net/GZ26j/

$('#next').on('click', function(e) {
    e.preventDefault();
    href = $(this).attr('href');
    var n = href.split('-')[1] * 1 + 1;
    n = n%5;
    e.target.href = href.split('-')[0] + '-' + n;
});​

编辑： 此解决方案使计数器从 0 而不是 1 开始

于 2012-04-13T09:53:53.250 回答