我正在使用Bootstrap模板，并且试图将主站点导航更改为页面底部的图像交换器。我尝试了几种方法，都没有成功。
我已经能够链接到网站，但是我无法在html页面中链接。
请提供解决或帮助我解决上述功能的方法。
HTML代码：
站点菜单
<!-- menu start -->
<div class="fadeIn-element" id="menu">
<nav class="menu">
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#news">Buttons/Lists</a>
</li>
<li>
<a href="#services">Gestures</a>
</li>
<li>
<a href="#works">Drag & Drop</a>
</li>
<li>
<a href="#web">Web Services</a>
</li>
<li>
<a href="#example">Examples</a>
</li>
</ul>
</nav>
</div><!-- menu end -->
缩略图刷
<!-- thumbnail slider start -->
<div class="hero-bg">
<!-- thumbnail slider top start -->
<div class="swiper-container swiper-slider-top">
<!-- thumbnail slider IMG start -->
<div class="swiper-wrapper">
<div class="swiper-slide thumbnail-slider-bg-1 overlay cover-all"></div>
<div class="swiper-slide thumbnail-slider-bg-2 overlay cover-all"></div>
<div class="swiper-slide thumbnail-slider-bg-3 overlay cover-all"></div>
<div class="swiper-slide thumbnail-slider-bg-4 overlay cover-all"></div>
<div class="swiper-slide thumbnail-slider-bg-5 overlay cover-all"></div>
<div class="swiper-slide thumbnail-slider-bg-6 overlay cover-all"></div>
<div class="swiper-slide thumbnail-slider-bg-7 overlay cover-all"></div>
<div class="swiper-slide thumbnail-slider-bg-8 overlay cover-all"></div>
</div><!-- thumbnail slider IMG end -->
<!-- controls start -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div><!-- controls end -->
</div><!-- thumbnail slider top end -->
<!-- thumbnail slider bottom start -->
<div class="swiper-container swiper-slider-bottom swiper-slider-bottom-text">
<!-- thumbnail slider thumbnail IMG start -->
<div class="swiper-wrapper">
<div class="swiper-slide thumbnail-slider-bg-1"> News <a class='default-link' onclick='location.a href = "#news"'></a></div>
<div class="swiper-slide thumbnail-slider-bg-2"></div>
<div class="swiper-slide thumbnail-slider-bg-3"></div>
<div class="swiper-slide thumbnail-slider-bg-4"></div>
<div class="swiper-slide thumbnail-slider-bg-5"></div>
<div class="swiper-slide thumbnail-slider-bg-6"></div>
<div class="swiper-slide thumbnail-slider-bg-7"></div>
<div class="swiper-slide thumbnail-slider-bg-8"></div>
</div><!-- thumbnail slider thumbnail IMG end -->
</div><!-- thumbnail slider bottom end -->
</div><!-- thumbnail slider end -->
JavaScript代码：
站点菜单
// 7. menu
$("#menu li a, #menu-mobile li a").on("click", function(e) {
e.preventDefault();
animateSlider(this.hash);
});
function animateSlider(hash) {
if (!$("#containerOT div.open").length) {
if (hash == "#news") {
openPopup(hash);
}
if (hash == "#about") {
openPopup(hash);
}
if (hash == "#services") {
openPopup(hash);
}
if (hash == "#works") {
openPopup(hash);
}
if (hash == "#web") {
openPopup(hash);
}
if (hash == "#example") {
openPopup(hash);
}
} else {
if (hash == "#home") {
openAndClose(hash)
}
if (hash == "#news") {
openAndClose(hash)
}
if (hash == "#about") {
openAndClose(hash)
}
if (hash == "#services") {
openAndClose(hash)
}
if (hash == "#works") {
openAndClose(hash)
}
if (hash == "#web") {
openAndClose(hash)
}
if (hash == "#example") {
openAndClose(hash)
}
}
}
function openPopup(hash) {
$(hash + "-lifting").slideToggle().addClass("open");
}
function openAndClose(hash) {
if ($(hash + "-lifting").hasClass("open")) {
$($(hash + "-lifting")).slideToggle().removeClass();
} else {
$("#containerOT div.open").slideToggle().removeClass();
$(hash + "-lifting").slideToggle().addClass("open");
}
}
缩略图刷
// 15. swiper
// 15.1. swiper thumbnail slider horizontal thumbs
var swipersliderTop = new Swiper(".swiper-slider-top", {
direction: "vertical",
nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev",
autoplay: 4000,
speed: 1600,
spaceBetween: 0,
centeredSlides: true,
slidesPerView: "auto",
touchRatio: 1,
loop: true,
slideToClickedSlide: true,
mousewheelControl: true,
keyboardControl: true
});
var swipersliderBottom = new Swiper(".swiper-slider-bottom", {
direction: "horizontal",
spaceBetween: 10,
centeredSlides: true,
slidesPerView: "auto",
touchRatio: 1,
loop: true,
slideToClickedSlide: true,
mousewheelControl: true,
keyboardControl: true
});
swipersliderTop.params.control = swipersliderBottom;
swipersliderBottom.params.control = swipersliderTop;
// 15.2. swiper thumbnail slider vertical thumbs
var swipersliderTopthumbsVertical = new Swiper(".swiper-slider-top-thumbs-vertical", {
direction: "horizontal",
nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev",
autoplay: 4000,
speed: 1600,
spaceBetween: 0,
centeredSlides: true,
slidesPerView: "auto",
touchRatio: 1,
// loop: true,
slideToClickedSlide: true,
mousewheelControl: true,
keyboardControl: true
});
var swipersliderBottomthumbsVertical = new Swiper(".swiper-slider-bottom-thumbs-vertical", {
direction: "vertical",
spaceBetween: 10,
centeredSlides: true,
// slidesPerView: "auto",
slidesPerView: 7,
touchRatio: 1,
// loop: true,
slideToClickedSlide: true,
mousewheelControl: true,
keyboardControl: true
});
swipersliderTopthumbsVertical.params.control = swipersliderBottomthumbsVertical;
swipersliderBottomthumbsVertical.params.control = swipersliderTopthumbsVertical;
// 15.3. swiper timeline slider
var timelineSwiper = new Swiper(".timeline .swiper-container", {
direction: "vertical",
autoplay: false,
speed: 1600,
spaceBetween: 0,
loop: false,
mousewheelControl: true,
keyboardControl: true,
pagination: ".swiper-pagination",
paginationBulletRender: function(swiper, index, className) {
var year = document.querySelectorAll(".swiper-slide")[index].getAttribute("data-year");
return '<span class="' + className + '">' + year + '</span>';
},
nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev",
paginationClickable: true,
breakpoints: {
768: {
direction: "horizontal",
}
}
});
// 15.4. swiper parallax slider
var swiper = new Swiper(".parallax .swiper-container", {
autoplay: 4000,
speed: 800,
parallax: true,
mousewheelControl: true,
keyboardControl: true,
nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev",
paginationClickable: true
});