I have two tabs on my webpage: "Overall Leaderboard" and "Weekly Leaderboard". Each tab displays a leaderboard with different scores.
When I click on the "Overall Leaderboard" tab, it shows a leaderboard with specific scores.
Now, my question is how can I make the "Weekly Leaderboard" tab display another leaderboard but maintain the same style using CSS?
Any assistance in achieving this would be greatly appreciated!
$(document).ready(function() {
$('.tab a').on('click', function(e) {
e.preventDefault();
var _this = $(this);
var block = _this.attr('href');
if (block == "#leaderboard") {
$(block).fadeIn();
$('#login').hide();
$(document).find('.active').removeClass("active");
$(this).parent().addClass("active");
}
if (block == "#login") {
$(block).fadeIn();
$('#leaderboard').hide();
$(document).find('.active').removeClass("active");
$(this).parent().addClass("active");
}
});
$('.tab.active a').click(); // Default open
});/* Include your CSS code here */<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Leaderboards</title>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active"><a href="#leaderboard">Overall Leaderboard</a>
</li>
<li class="tab"><a href="#login">Weekly Leaderboard</a>
</li>
</ul>
<div class="tab-content">
<div id="signup">
<div class="leaderboard" id="leaderboard">
<ol>
<li>
<mark>Jerry Wood</mark>
<small>315</small>
</li>
<!-- Add more leaderboard data here -->
</ol>
</div>
</div>
<div id="login">
<h1></h1>
<form action="/" method="post">
<div class="leaderboard" id="leaderboard">
<ol>
<li>
<mark>Jerry Wood</mark>
<small>45</small>
</li>
<!-- Add more leaderboard data here -->
</ol>
</div>
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>You can view the image here.
Check out the Fiddle link for more details: here.