私は次のコードを持っています: fiddle
これは私が自分で作成したWebサイトでうまく機能し、JSがなくてもタブは関連セクションへのジャンプリンクとして機能します。オーダーメイドのCMSに配置すると、ジャンプリンクが機能しない瞬間に使用せざるを得ません。私はタブにもっと相対リンクを追加しようとしましたが、これはJSなしで機能しますが、JSではタブ付きコンテンツが表示されません。
何か不足していますか?
html:
<ul id="tabs">
<li><a href="#tab1">test1</a></li>
<li><a href="#tab2">test2</a></li>
<li><a href="#tab3">test3</a></li>
<li><a href="#tab4">test4</a></li>
</ul>
<div class="container" id="tab1">Some content</div>
<div class="container" id="tab2">Some content</div>
<div class="container" id="tab3">Some content</div>
<div class="container" id="tab4">Some content</div>
jQuery:
$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function(){
var t = $(this).attr('href');
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$(t).fadeIn('slow');
return false;
})
if($(this).hasClass('inactive')){ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$(t).fadeIn('slow');
}
あなたのウェブサイトでhrefに問題があると思います。ユーザーがhrefをクリックすると、ウェブサイトは自動的に根絶していると思います。
私はあなたのための新しい解決策を持っています:
更新されたjQuery:
$('#tabs li a').click(function(){
var t = $(this).attr('id');
if($(this).hasClass('inactive')){ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$('#'+ t + 'C').fadeIn('slow');
}
});
新しいHTMLマークアップ:
<ul id="tabs">
<li><a id="tab1">test1</a></li>
<li><a id="tab2">test2</a></li>
<li><a id="tab3">test3</a></li>
<li><a id="tab4">test4</a></li>
</ul>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>
$(document).ready(function() {
$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs li a').click(function(e) {
e.preventDefault();
if ($(this).attr("id") == "current"){ //detection for current tab
return
}
else{
$("#content div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$( $(this).attr('href')).fadeIn(); // Show content for current tab
}
});
});
デモを参照してください: http://jsfiddle.net/pradeepk00786/5ezT3/
ソリューションJSFiddle ::https://jsfiddle.net/incorelabs/mg6e4ren/74/
タブの実装は非常に簡単です。質問のHTMLを少し変更しました。不要なアンカータグを削除しました。
HTML
<ul>
<li class="tab-switcher" data-tab-index="0" tabindex="0">
Tab 1
</li>
<li class="tab-switcher" data-tab-index="1" tabindex="0">
Tab 2
</li>
<li class="tab-switcher" data-tab-index="2" tabindex="0">
Tab 3
</li>
<li class="tab-switcher" data-tab-index="3" tabindex="0">
Tab 4
</li>
</ul>
<div id="allTabsContainer">
<div class="tab-container" data-tab-index="0">
Some content for Tab - 1
</div>
<div class="tab-container" data-tab-index="1" style="display:none;">
Some content for Tab - 2
</div>
<div class="tab-container" data-tab-index="2" style="display:none;">
Some content for Tab - 3
</div>
<div class="tab-container" data-tab-index="3" style="display:none;">
Some content for Tab - 4
</div>
</div>
HTMLの謎解き
jQuery
$(document).ready(function () {
var previousActiveTabIndex = 0;
$(".tab-switcher").on('click keypress', function (event) {
// event.which === 13 means the "Enter" key is pressed
if ((event.type === "keypress" && event.which === 13) || event.type === "click") {
var tabClicked = $(this).data("tab-index");
if(tabClicked != previousActiveTabIndex) {
$("#allTabsContainer .tab-container").each(function () {
if($(this).data("tab-index") == tabClicked) {
$(".tab-container").hide();
$(this).show();
previousActiveTabIndex = $(this).data("tab-index");
return;
}
});
}
}
});
});
謎解きjQuery
疑問がある場合、または提案がある場合は、投稿にコメントしてください。
<script>
$('.tabheading li').click(function () {
var tabid = $(this).attr("rel");
$(this).parents('.tabcontainer').find('.active').removeClass('active');
$('.tabbody').hide();
$('#' + tabid).show();
$(this).addClass('active');
return false;
});
</script>
クリック ここ
レスポンシブタブ自動再生機能。これらはプラグインを必要としません
[〜#〜] html [〜#〜]
<div class="row responsive-tab-wrapper">
<div class="col-md-3 tab-items-list">
<ul class="resp-tabs-list">
<li class="resp-tab-item">TAB 1</li>
<li class="resp-tab-item">TAB 2</li>
<li class="resp-tab-item">TAB 3</li>
</ul>
</div>
<div class="col-md-9 resp-tabs-container">
<div class="resp-tabs-container-item">
<div class="prod-tab-content">
<h4>TAB 1 TITLE</h4>
<p>
TAB 1 CONTENT
</p>
</div>
</div>
<div class="resp-tabs-container-item">
<div class="prod-tab-content">
<h4>TAB 2 TITLE</h4>
<p>
TAB 2 CONTENT
</p>
</div></div>
<div class="resp-tabs-container-item">
<div class="prod-tab-content">
<h4>TAB 3 TITLE</h4>
<p>
TAB 3 CONTENT
</p>
</div>
</div>
</div>
</div>
[〜#〜] css [〜#〜]
.responsive-tab-wrapper{
-webkit-box-shadow: 0px 3px 25px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 25px -5px rgba(0,0,0,0.75);
box-shadow: 0px 3px 25px -5px rgba(0,0,0,0.75);
margin-top: 50px;
padding: 15px
}
.resp-tabs-container{
padding: 30px;
}
.resp-tabs-list {
padding: 0;
}
.resp-tabs-list i {
margin-right: 15px;
font-size: 24px;
}
.resp-tabs-list li {
cursor: pointer;
border-bottom: solid 1px #e4eae1;
line-height: 55px;
padding-left: 15px;
font-weight: 300;
font-size: 18px;
/* transition: all 0.5s ease; */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
font-family: 'Hammersmith One', sans-serif;
text-transform: uppercase;
border-left: solid 2px #fff;
list-style: none;
white-space: nowrap;
overflow: hidden;
text-overflow: Ellipsis;
}
.resp-tabs-list li:hover,
.resp-tabs-list li.resp-tab-active,
h3.resp-accordion:hover {
background-color: #ffffff;
/* border-bottom: 1px solid #BFE1B1; */
border-left: solid 2px #3bc500;
}
h3.resp-tab-active,
h3.resp-tab-active:hover {
border-bottom: 1px solid #e7edee;
}
h3.resp-accordion {
cursor: pointer;
font-size: 18px;
display: none;
font-weight: 300;
border-bottom: 1px solid #e7edee;
margin: 0;
line-height: 66px;
transition: all 0.7s ease;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
h3.resp-accordion:hover {}
.resp-tab-content {
display: none;
}
.resp-content-active,
.resp-accordion-active {
display: block;
}
/*-----------Vertical tabs-----------*/
.resp-arrow {
width: 0;
height: 0;
float: right;
margin-top: 27px;
margin-right: 15px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid;
}
h3.resp-tab-active span.resp-arrow {
border: none;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 7px solid;
}
/*-----------Accordion styles-----------*/
h3.resp-tab-active {
background: #dbfdcc;
/* !important;*/
border-color: #d3efc8;
}
.resp-easy-accordion h3.resp-accordion {
display: block;
}
.resp-jfit {
width: 100%;
margin: 0px;
}
.resp-tab-content-active {
display: block;
background: #e7edee;
padding: 0 25px 25px;
}
.prod-tab-content img{
width: 300px;
float: right;
}
/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 980px) {
ul.resp-tabs-list {
display: none;
}
h3.resp-accordion {
display: block;
padding-left: 25px;
}
.resp-accordion-closed {
display: none !important;
}
.prod-tab-content{
padding: 10px;
}
}
jQuery
$(function () {
var startItemIndex = 0;
var tabItemContainer = ".resp-tabs-container";
var tabItemList = $(".resp-tabs-list");
var tabInterval;
var tabIntervalTime = 3000; //In milliseconds
var stopOnHover = true;
tabItemList.find(".resp-tab-item").each(function(index,val){
var itemHeading = $(this).html();
$(tabItemContainer).find(".resp-tabs-container-item").eq(index).before('<h3 class="resp-accordion" data-listindex="'+index+'"><span class="resp-arrow"></span>'+itemHeading+'</h3>');
});
$(tabItemContainer).find(".resp-tabs-container-item h3.resp-accordion").on("click", function () {
var itemIndex = $(this).index();
changeIndex(itemIndex);
clearInterval(tabInterval);
startAutoTab();
});
function changeIndex(itemIndex) {
tabItemList.find(".resp-tab-item").removeClass("resp-tab-active");
tabItemList.find(".resp-tab-item:eq(" + itemIndex + ")").addClass("resp-tab-active");
if($(window).width()<980){
$(tabItemContainer).find(".resp-tabs-container-item").slideUp();
$(tabItemContainer).find(".resp-tabs-container-item:eq(" + itemIndex + ")").stop().slideDown();
}else{
$(tabItemContainer).find(".resp-tabs-container-item").hide();
$(tabItemContainer).find(".resp-tabs-container-item:eq(" + itemIndex + ")").stop().fadeIn();
}
$(tabItemContainer).find("h3.resp-accordion").removeClass("resp-tab-active");
$(tabItemContainer).find("h3.resp-accordion").eq(itemIndex).addClass("resp-tab-active");
}
changeIndex(startItemIndex);
tabItemList.find(".resp-tab-item").on("click", function () {
var itemIndex = $(this).index();
changeIndex(itemIndex);
clearInterval(tabInterval);
startAutoTab();
});
$(document).find(tabItemContainer).find("h3.resp-accordion").on("click", function () {
var itemIndex = $(this).attr("data-listindex");
changeIndex(itemIndex);
clearInterval(tabInterval);
startAutoTab();
});
function startAutoTab() {
tabInterval = setInterval(function () {
var isHovered = false;
if(stopOnHover)
isHovered = ($('ul.resp-tabs-list').is(":hover") || $('div.resp-tabs-container').is(":hover"));
if (!isHovered) {
var totalTabs = tabItemList.find(".resp-tab-item").length;
if (totalTabs == ($("ul.resp-tabs-list .resp-tab-item.resp-tab-active").index() + 1)) {
$(".resp-tab-item").eq(0).trigger("click");
} else {
$(".resp-tab-item.resp-tab-active").next().trigger("click");
}
}
}, tabIntervalTime);
}
startAutoTab();
});
Jqueryを含める:
https://code.jquery.com/jquery-3.1.1.min.js
HTML:
<br>
<div align="center" >
<button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-1" class="btn btn-info" >Tab 1</button>
<button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-2" class="btn btn-info" >Tab 2</button>
<button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-3" class="btn btn-info" >Tab 3</button>
</div>
<br />
<div class="gtabs demo" >
<div class="gtab active tab-1">
<h1>Gtab 1</h1>
<button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-2" class="ui button" >Tab 2</button>
</div>
<div class="gtab tab-2">
<h1>Gtab 2</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipiscelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut dolelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut dolelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut doli debitis similique, nostrum provident ut dolore.
</p>
</div>
<div class="gtab tab-3">
<h1>Gtab 3</h1>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi consequatur qui nostrum deleniti, quaerat. Voluptate quisquam nulla, sit error, quas mollitia sint veniam at rem corporis dolore, eaque sapiente qui.
</p>
CSS:
.gtabs {
position: relative;
.gtab {
background: #eee;
position: absolute;
width: 100%;
opacity: 0;
visibility: hidden;
padding: 10px;
top: 5px;
transition: all 0.4s;
&.active {
opacity: 1;
visibility: visible;
top: 0;
transition: all 0.4s;
}
}
}
JS:
$("[data-toggle='tab']").click(function () {
var tabs = $(this).attr('data-tabs');
var tab = $(this).attr("data-tab");
$(tabs).find(".gtab").removeClass("active");
$(tabs).find(tab).addClass("active");
});