錨鏈接跳轉到輪播幻燈片

Question

我的導航中有不同的錨鏈接。 當前，如果您單擊子菜單（即“ Beglaubigungen”），則跳至常規錨點，即引導程序滑塊。 但是我還希望它在滑塊內滑動到相關的幻燈片。 我怎樣才能做到這一點？

滑塊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>

我的導航欄：

我嘗試過的

我想錨鏈接必須看起來像這樣的導航：

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

我試過了，但是沒有用：

$(document).ready(function(){

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

});

Answer 1

您可以通過在發生hashchange事件時轉換輪播來實現所需的功能（輪播錨鏈接具有預定義的格式/語法）。

MVP示例實現（為了清晰起見，在解釋中保持內聯）

還添加了一項檢查，以允許頁面中其他錨鏈接的默認行為。 單擊“普通哈希”即可看到。 根據您的需要，您可能需要也可能不需要。

 // 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> 

參考文獻：

• 所以問題

• MDN HashChange頁面

• 我可以用嗎

Answer 2

找到了解決方案。 只是觸發另一個id的功能：

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