使用不同的话题标签 URL ID 引导轮播

Bootstrap Carousel with different hashtag URL ID

本文关键字：ID URL 标签 话题      更新时间：2023-09-26

我已经为引导轮播的每张幻灯片创建了一个单独的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>

> 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>
相关文章：