1
Я использую закладки bootstrap для плагина accordian - при отображении вкладок активная вкладка имеет класс «active». Однако, когда это изменяется в соответствии с соглашением, «активный» класс отсутствует в гармоническом заголовке, и поэтому его нельзя стилизовать. любые мысли о том, как я могу получить активный класс на саксофонных титулах?Отзывчивые вкладки в accordian - bootstrap - нет активного класса
Ниже приводится ссылка на jsFiddle и код у меня есть: http://jsfiddle.net/f1kp85Lb/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Standard</title>
<!-- Bootstrap -->
<link href="http://www.swimmingcover.co.uk/new_build/bootstrapgrid/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="http://www.swimmingcover.co.uk/new_build/bootstrapgrid/css/globalstyles.css" rel="stylesheet" type="text/css">
<link href="http://www.swimmingcover.co.uk/new_build/bootstrapgrid/css/product.css" rel="stylesheet" type="text/css">
</head>
<body id="category">
<a href="#" class="scrollToTop">Scroll To Top</a>
<div id="bag_container">
<div id="main_content" class="container-fluid">
<div id="main_content_container">
<div class="row">
<section id="main_content_fw" class="col-sm-12">
<div class="row" id="prd_pg_tabs">
<ul class="nav nav-tabs responsive" id="myTab">
<li class="active"><a class="deco-none misc-class" href="#tab_summary">Summary</a></li>
<li class=""><a href="#tab_fineprint">Fine Print</a></li>
<li><a class="deco-none" href="#tab_locations">Locations</a></li>
</ul>
<div class="tab-content responsive">
<div class="tab-pane active" id="tab_summary">
tab1 content
</div>
<div class="tab-pane" id="tab_fineprint">
tab2 content
</div>
<div class="tab-pane" id="tab_locations">
tab3 content
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.swimmingcover.co.uk/new_build/bootstrapgrid/js/bootstrap.min.js"></script>
<script src="http://www.swimmingcover.co.uk/new_build/bootstrapgrid/js/responsive-tabs.js"></script>
<script type="text/javascript">
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('#moreTabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
(function($) {
//Test for making sure event are maintained
fakewaffle.responsiveTabs([ 'xs', 'sm' ]);
})(jQuery);
//Stops the page jumping when tab is clicked
$('.nav-tabs li a').click(function(e) {
history.pushState(null, null, $(this).attr('href'));
});
</script>
</body>
</html>
Ссылка на сайт плагина пожалуйста. – cvrebert
Здесь http://openam.github.io/bootstrap-responsive-tabs/ –