具有不同主题标签 URL ID 的引导轮播

Question

我为 Bootstrap Carousel 的每张幻灯片创建了一个单独的 URL。但是，它目前通过以下方式使用带有主题标签的数字：

domain.net/pride#1
domain.net/pride#2
domain.net/pride#3

有没有办法让它变成我想要的？比如：

domain.net/pride#events
domain.net/pride#press
domain.net/pride#schedule

谢谢。

<script>
    var url = document.location.toString();
    if (url.match('#')) {
    // Clear active item
        jQuery('.carousel-inner div').removeClass('active');

    // Activate item number #hash
    var index = url.split('#')[1];
        jQuery('.carousel-inner div:nth-child(' + index + ')').addClass('active');
    }

    jQuery('#PrideCr').bind('slid', function (e) {
        // Update location based on slide (index is 0-based)
        var item = jQuery('#PrideCr .carousel-inner .item.active');
            window.location.hash = "#"+parseInt(item.index()+1);
    })
</script>

Answer 1

2) 通过data-name 属性

http://glebkema.ru/tasks/so-38407398.html

var url = document.location.toString();

if (url.match('#')) {
    // Clear active item
    $('#PrideCr .item.active').removeClass('active');

    // Activate item number #hash
    var index = url.split('#')[1];
    $('#PrideCr .item[data-name="' + index + '"]').addClass('active');
}

$('#PrideCr').on('slid.bs.carousel', function () {
    // Update location based on slide
    var item = $(this).find('.item.active').data('name');
    if (item) window.location.hash = "#" + item; // Doesn't work on SO
    console.log(item);
})

.carousel-inner img {
  height: auto;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="PrideCr" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div data-name="events" class="item active">
      <img src="http://placehold.it/600x150/c69/f9c/?text=events" alt="">
    </div>
    <div data-name="press" class="item">
      <img src="http://placehold.it/600x150/9c6/cf9/?text=press" alt="">
    </div>
    <div data-name="schedule" class="item">
      <img src="http://placehold.it/600x150/69c/9cf/?text=schedule" alt="">
    </div>
  </div>
  <a class="left carousel-control" href="#PrideCr" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
  <a class="right carousel-control" href="#PrideCr" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

1) 通过id 属性

我想您可以将id 属性添加到轮播的项目中，并在您的脚本中使用此属性。像这样的：

<div class="carousel-inner" role="listbox">
  <div id="events" class="item active">
    <img src="..." alt="...">
  </div>
  <div id="press" class="item">
    <img src="..." alt="...">
  </div>
  <div id="schedule" class="item">
    <img src="..." alt="...">
  </div>
</div>

<script>
    var url = document.location.toString();
    if (url.match('#')) {
        // Clear active item
        jQuery('#PrideCr .item.active').removeClass('active');

        // Activate item number #hash
        var index = url.split('#')[1];
        jQuery('#' + index).addClass('active');
    }

    jQuery('#PrideCr').bind('slid', function (e) {
        // Update location based on slide
        var item = jQuery('#PrideCr .item.active').attr('id');
        if (item) window.location.hash = "#" + item;
    })
</script>