anchor link 跳转到轮播幻灯片

Question

我的导航中有不同的锚 link。目前，如果您单击子菜单，即 "Beglaubigungen"，您将跳转到一个正常的锚点，即 bootstrap 滑块。但我还希望它在滑块内滑动到相关幻灯片。我该怎么做？

滑块HTML:

<ul class="list-inline">
    <li> <a id="carousel-selector-0" class="selected"> Example 1 </a></li>
    <li> <a id="carousel-selector-1" > Example 2 </a></li>
    <li> <a id="carousel-selector-2" > Example 3 </a></li>              
</ul>

<div id="myCarousel" class="carousel slide">
   <!-- main slider carousel items -->
   <div class="carousel-inner">
       <div class="active item" data-slide-number="0"> abcdefghi</div>
       <div class="item" data-slide-number="1"> abcdefghi</div>
       <div class="item" data-slide-number="2"> abcdefghi</div>
   </div>
</div>

我的导航栏：

我尝试了什么

我猜锚 link 的导航一定是这样的：

https://mydomain.de/#anchor?slide=2

我试过了，但没用：

$(document).ready(function(){

$('#myCarousel').carousel(window.location.hash.substring(1));

});

Answer 1

您可以通过在 hashchange 事件发生时转换轮播来实现所需的功能（使用预定义的 format/syntax 轮播锚链接）。

MVP 示例实现（为清楚起见，保留了内联解释）

还添加了检查以允许页面中其他锚链接的默认行为。点击 'Normal Hash' 可以看到。根据您的需要，您可能需要也可能不需要处理。

// Create a RegExp for matching expected hash values. 
// This is used to ensure our sliding logic happens on only the relevant hash-changes
// For this example, I have assumed the pattern to be myCarousel-<slide#> 
// (Ex: myCarousel-1 goes to the first slide)
var slideRegExp = /^#myCarousel-[0-9]+$/;

// Get a reference to the nav items to update active status  - you may want to do this differently 
// based on your usecase
var $navItems = $('.nav-item');

// Initialise the carousel and keep the reference (to avoid repeated jQuery lookups)
var $c = $('#myCarousel').carousel({
  interval: 9000
});

// Listen for the hash change event on the window object
$(window).on('hashchange', function(ev) {
  // Hash has changed
  //Get current has value
  var hash = window.location.hash;

  // Ensure this is a hash for our slider
  if (!slideRegExp.test(hash)) {
    // RegExp match failed, this is for something else, do nothing
    // and preserve default behaviour
    return true;
  }

  // Exctract the slide value 
  var slide = +hash.split('-')[1];
  // Adjust for zero index
  slide = !isNaN(slide) && slide > 0 ? slide - 1 : 0;

  // Transition to the computed slide
  $c.carousel(slide);

  // Update hash to the hash-id of the carousel
  // You may want to do this using scrollTo or something similar if changing the hash is a problem
  window.location.hash = '#myCarousel';

  // Prevent the default browser action for this hash change
  ev.preventDefault();
  return false;
});

// Listen for the slide event and update the active status of navigation links
// Not sure if this is necessary in your case considering your example uses a dropdown 
$c.on('slide.bs.carousel', function(ev) {
  var slide = +ev.to;
  $navItems.filter('.active').removeClass('active');
  $navItems.filter("[data-slide='" + slide + "']").addClass('active');
});

.nav-item {
    cursor: pointer;
}

.nav-item.active {
    color: blue;
}

nav {
    background: #dadada;
    margin-bottom: 1rem;
}

#normal-hash{
    height: 400px;
    background: #ffdada;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<main>
  <nav class="navbar">
    <div class="nav-item"><a href="#normal-hash">Normal Hash</a></div>
    <div class="nav-item active"><a href="#myCarousel-1">Slide 1</a></div>
    <div class="nav-item"><a href="#myCarousel-2">Slide 2</a></div>
    <div class="nav-item"><a href="#myCarousel-3">Slide 3</a></div>
  </nav>
  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="http://via.placeholder.com/350x150/FF0000" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="http://via.placeholder.com/350x150/00FF00" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="http://via.placeholder.com/350x150/0000FF" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <div style="height:500px;background:#dadada">
    <h4>Padding Div</h4>
  </div>
  <div id="normal-hash">
    <h4>Normal Hash Behaviour Div</h4>
  </div>
  <div style="height:500px;background:#dadada">
    <h4>Padding Div</h4>
  </div>
</main>

参考文献：

Answer 2

找到解决方案。只是触发另一个 id 的功能：

<input type="button" id="primaryButton" onclick="ExistingLogic()" />
<input type="button" id="secondaryButton" onclick="document.getElementById('primaryButton').click()" />

anchor link 跳转到轮播幻灯片

anchor link jump to carousel slide

javascript

anchor

slider

carousel