按钮上的交换内容，点击下一步/上一按钮

我需要在按钮/数字点击上交换内容。
如果你能看到的片段，你可以使用按钮"1,2,3,4"或者也使用下一个和:的人。两者都可以访问同一篇文章。我的代码已经工作，但你需要刷新它首先，如果你想使用下一步/上一页，或数字按钮。

$(document).ready(function() {
$(".btn-hover div").each(function(e) {
if (e != 0)
$(this).hide();
});

$("#next").click(function() {
if ($(".content5 div:visible,.content6 div:visible").next().length != 0)
$(".content5 div:visible,.content6 div:visible").next().show().prev().hide();
else {
$(".content5 div:visible,.content6 div:visible").hide();
$(".content5 div:first,.content6 div:first").show();
}
return false;
});
$("#previous").click(function() {
if ($(".content5 div:visible,.content6 div:visible").prev().length != 0)
$(".content5 div:visible,.content6 div:visible").prev().show().next().hide();
else {
$(".content5 div:visible,.content6 div:visible").hide();
$(".content5 div:last,.content6 div:last").show();
}
return false;
});

$('.btn-hover').first().addClass('btn-active');
$('.btn-hover').click(function(){
var $this = $(this);
$siblings = $this.parent().children(),
position = $siblings.index($this);
console.log (position);

$('.content5 div').removeClass('btn-active').eq(position).addClass('btn-active');
$('.content6 div').removeClass('btn-active').eq(position).addClass('btn-active');
$siblings.removeClass('btn-active');
$this.addClass('btn-active');
});
});

<!doctype html>
<html lang="en">
<head>
</head>
<body>
<!--Navbar-->
<div id="section1-the-timeline" class="scrollNav">
<div class="container-fluid section section_bg_grey">
<div class="col">
<div Class="button-wrap timeline  px-5">
<a href="#section2-the-timeline" class="btn-hover">1</a>
<a href="#section2-the-timeline" class="btn-hover">2</a>
<a href="#section2-the-timeline" class="btn-hover">3</a>
</div>
</div>
</div>
</div>
<div id="section2-the-timeline" class="section section_secondary_bg">
<div class="container-fluid">
<div class="row d-flex align-items-center">
<div class="col-md-7">
<div class="text-center section_content">
<div id="content5" class="content5 pb-4">
<div class="btn-content-1 btn-active">
<p>1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci</p>
</div>
<div class="btn-content-2">
<p>2</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci ullam reiciendis beatae perspiciatis impedit quam nemo asperiores, deserunt, distinctio</p>
</div>
<div class="btn-content-3">
<p>3</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci</p>
</div>
</div>
</div>
</div>
<div class="col-md-5 img_wrapper">
<div id="content6" class="content6">
<div class="btn-content-1 btn-active"><img src="https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png"></div>
<div class="btn-content-2"><img src="https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png"></div>
<div class="btn-content-3"><img src="https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png"></div>

</div>
</div>
</div>
</div>
</div>
<div class="chevron">
<div class="d-flex justify-content-center middle-chevron">
<button id="previous" class="btn btn-chevron"><i class="fas fa-chevron-left"></i></button>
<button id="next" class="btn btn-chevron"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="js/animation.js"></script>
</body>
</html>

为页面添加一个具有特定ID的元素
放置带有data-tabs-分页的DIV
放置一个带有data-tabs的DIV -navigation

<div data-tabs-pagination="#someElement"><!-- POPULATED BY JS --></div>
<div id="someElement" class="css-pages">
<div>Page 1 Lorem</div>
<div>Page 2 Ipsum</div>
<div>Page 3 Dolor</div>
</div>
<div data-tabs-navigation="#someElement"><!-- POPULATED BY JS --></div>

注意data-tabs-*属性如何匹配目标元素ID选择器

JavaScript实例带有自定义选项的可选对象可能看起来像:

// Use like:
const myTabs = new Tabs("#someElement", {
page: 1, // Start from second page (Page index 1),
btnPrev: {innerHTML: "&larr;", className: "btn"},
btnNext: {innerHTML: "&rarr;", className: "btn"},
onChange() {
console.log(this);
}
});
// What you can also do:
myTabs.show(0);           // Show page at index (First page = 0)
myTabs.next();            // Go to next page
myTabs.prev(2);           // Go back two pages
myTabs.next().next();     // Go forward two pages (thanks to chaining methods)
console.log(myTabs.page); // Get current page index

这样做，你可以有尽可能多的标签/页面，甚至幻灯片或画廊在一个文档中使用完全相同的脚本:

class Tabs {
constructor(selector, options = {}) {
Object.assign(
this, {
EL: document.querySelector(selector),
page: 0,
selector,
btnTabs: {}, // Custom attributes for tabs (navigation) buttons
btnPrev: {}, // Custom attributes for PREV button
btnNext: {}, // Custom attributes for NEXT button
classActive: "is-active",
onChange: () => {},
},
options
);
this.EL_pages = this.EL.children;
this.EL_pagination = document.querySelectorAll(`[data-tabs-pagination="${this.selector}"]`);
this.EL_navigation = document.querySelectorAll(`[data-tabs-navigation="${this.selector}"]`);
this.total = this.EL_pages.length;
this.EL_prev = this._ELNew("button", {
type: "button",
textContent: "Prev",
onclick: () => this.prev(),
...this.btnPrev,
});
this.EL_next = this._ELNew("button", {
type: "button",
textContent: "Next",
onclick: () => this.next(),
...this.btnNext,
});
this.EL_buttons = Array.from(Array(this.total)).reduce((arr, _, i) => {
const EL_btn = this._ELNew("button", {
type: "button",
textContent: i + 1,
onclick: () => (this._page = i),
...this.btnPagination,
});
arr.push(EL_btn);
return arr;
}, []);
this._init();
}
// Utility function - New element
_ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {});
// Fix negative modulo index 
_mod = (n) => ((n % this.total) + this.total) % this.total;
// Initialize
_init() {
// Append nav buttons to DOM
this.EL_pagination.forEach((EL) => EL.append(...this.EL_buttons));
this.EL_navigation.forEach((EL) => EL.append(this.EL_prev, this.EL_next));
// Set current page
this._page = this.page;
}
prev(n = 1) {
this._page -= n;
return this;
}
next(n = 1) {
this._page += n;
return this;
}
show(idx) {
this._page = idx;
return this;
}
set _page(n) {
this.page = this._mod(n);
[...this.EL_pages, ...this.EL_buttons].forEach((EL) => EL.classList.remove(this.classActive));
[this.EL_pages[this.page], this.EL_buttons[this.page]].forEach((EL) => EL.classList.add(this.classActive));
// Provide a callback
this.onChange.call(this);
}
get _page() {
return this.page;
}
}

// Use like:
const mySectionTabs = new Tabs("#section-a", {
onChange() {
console.clear();
console.log(`Current page index: ${this.page}`);
}
});

/*
The CSS is entirely up to you,
the only thing you need to know is that JS adds ".is-active" to both
- the current page / slide
- the current pagination button
*/
.css-pages > div {
display: none;
}
.css-pages > div.is-active {
display: block;
}
[data-tabs-pagination] > button.is-active {
color: #0bf;
}

<div data-tabs-pagination="#section-a"></div>
<div id="section-a" class="css-pages">
<div>Page 1 Lorem</div>
<div>Page 2 Ipsum</div>
<div>Page 3 Dolor</div>
</div>
<div data-tabs-navigation="#section-a"></div>

相关内容

最新更新

热门标签：