我需要使用 Jquery 中的“显示”和“隐藏”选项在 Jquery 中完成带有“下一个”和“上一个”按钮的表单。在 div1 上禁用选项 PREVIOUS。当谈到 div5 时禁用选项 NEXT。我认为这可以通过几行 jQuery 代码来完成。
#div2 {
display: none;
}
#div3 {
display: none;
}
#div4 {
display: none;
}
#div5 {
display: none;
}<div class="container">
<form>
<div id="div1">
<p>Content 1</p>
<button>PREVIOUS</button>
<button>NEXT</button>
</div>
<div id="div2">
<p>Content 2</p>
<button>PREVIOUS</button>
<button>NEXT</button>
</div>
<div id="div3">
<p>Content 3</p>
<button>PREVIOUS</button>
<button>NEXT</button>
</div>
<div id="div4">
<p>Content 5</p>
<button>PREVIOUS</button>
<button>NEXT</button>
</div>
<div id="div5">
<p>Content 5</p>
<button>PREVIOUS</button>
<button>NEXT</button>
</div>
</form>
</div>最佳答案
这个解决方案怎么样？希望对您有帮助!
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
jQuery('.nextButton').on('click', function() {
var $activeTab = $('.tab-links li.active');
var $wrapper = jQuery(this).closest('.tabs');
var indexActive = $wrapper.find('li.active').index();
$wrapper.find('li').eq(indexActive + 1).find('a').click();
});
jQuery('.prevButton').on('click', function() {
var $activeTab = $('.tab-links li.active');
var $wrapper = jQuery(this).closest('.tabs');
var indexActive = $wrapper.find('li.active').index();
$wrapper.find('li').eq(indexActive - 1).find('a').click();
});
});.tabs {
width:100%;
display:inline-block;
}
.tabs h4 {
color: #00447c;
margin: 5px 0 15px 0;
display: inline-block;
}
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links {
padding: 0;
margin: 10px 0 0 0;
position: relative;
top: 2px;
}
.tab-links li {
margin:0px 5px 0 0;
float:left;
padding-top: 2px;
list-style:none;
}
.tab-links a {
padding:9px 8px 6px;
display:inline-block;
background: #c7d8e8;
border: 2px solid #c7d8e8;
border-bottom: 3px solid #c7d8e8;
font-size: 10.5px;
font-weight:600;
color:#00447c;
transition:all linear 0.15s;
}
.tab-links a:hover {
background: #a7cce5;
text-decoration:none;
border: 2px solid #a7cce5;
border-bottom: 3px solid #a7cce5;
color: #ee3124;
}
li.active a, li.active a:hover {
background:#fff;
height: 16px;
border-bottom: none;
color: #ee3124;
}
.tab-content, .uploaded-documents-container {
padding:15px;
border-radius:3px;
border: 2px solid #c7d8e8;
background:#fff;
font-size: .95em;
}
.tab-content-scroll {
max-height: 375px;
min-height: 375px;
max-width: 1100px;
min-width: 450px;
overflow: auto;
clear:both;
}
.tab-content-scroll-home {
min-height: 135px;
}
.button-bar-scroll {
min-height: 235px;
}
.tab-content-scroll>p {
margin-top: 0;
padding-right: 12px;
}
.tab-content a {
margin-top: 10px;
color: #00447c;
}
.tab {
display:none;
}
.tab.active {
display:block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Tab #1</a></li>
<li><a href="#tab2">Tab #2</a></li>
<li><a href="#tab3">Tab #3</a></li>
<li><a href="#tab4">Tab #4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<h4>Content 1</h4>
<ul class="tab-links">
<li>
<a href="#next_tab2" class="nextButton">Next</a>
</li>
</ul>
</div>
<div id="tab2" class="tab">
<h4>Content 2</h4>
<ul class="tab-links">
<li>
<a href="#back_tab1" class="prevButton">Prev</a>
<a href="#next_tab2" class="nextButton">Next</a>
</li>
</ul>
</div>
<div id="tab3" class="tab">
<h4>Content 3</h4>
<ul class="tab-links">
<li>
<a href="#back_tab1" class="prevButton">Prev</a>
<a href="#next_tab2" class="nextButton">Next</a>
</li>
</ul>
</div>
<div id="tab4" class="tab">
<h4>Content 4</h4>
<ul class="tab-links">
<li>
<a href="#back_tab1" class="prevButton">Prev</a>
</li>
</ul>
</div>
</div>
</div>关于javascript - 带有“下一个”和“上一个”按钮的表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41125739/