Я использую вкладки начальной загрузки для аккордового плагина - когда вкладки отображаются, активная вкладка имеет класс «активный». Однако, когда это изменяется на аккордеон, «активный» класс отсутствует в заголовке аккордеона и, следовательно, не может быть стилизован. какие-нибудь мысли о том, как я могу получить активный класс на аккордеонных названиях?
Ниже приведена ссылка на 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>
