Utilizing bootstrap for tab-fade functionality has been successful so far. However, I am facing an issue when trying to select multiple active classes instead of just one. My current JQuery code only changes the text in the first element with the "active" class to "hello world". Ideally, I want to display all elements with the ".active" class in the container on the page. What would be the best approach to achieve this? It seems like a simple task.
I have attempted storing the ".active" class in a variable and experimenting with different CSS selectors, but none of them yielded the desired results.
$('.tab-content>.active').html("Hello world");<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
</head>
<body>
<header>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="Test2.css" rel="stylesheet">
</header>
<nav class="nav"><span style="font-size: 30px; height: 30%">
<ul>
<li> <a href="#">Abab</a></li>
<li> <a href="#">BABA</a></li>
<li> <a href="#">CDCDC</a></li>
<li> <a href="#">EDED</a></li>
</ul>
</span> </nav>
<button id="button">Click here</button>
<ul class="nav nav-tabs" role="tablist" id="Exampletabs">
<li><a href="#Article1" role="tab" data-toggle="tab">Article 1</a></li>
<li><a href="#Article2" role="tab" data-toggle="tab">Article 2</a></li>
<li><a href="#Article3" role="tab" data-toggle="tab">Article 3</a></li>
<li><a href="#Article4" role="tab" data-toggle="tab">Article 4</a></li>
</ul>
<!--Tab panes-->
<section id="page">
<section id="container">
<h1>Hello world!</h1>
<p>Check out my skills. I have mad coding skills. I am the best. There is no one else out there like me. Any of the articles that appear in the articles section above will appear below, and, I have several pages that you can go through that all lead
the same place. </p>
<br>
<p>You can click on the article sections to see different previews of my website. I hope to write many more movie reviews as time goes on. I also hope to add in some analysis about news, tech and politics. I was after all a Political Science and Communication
major while I was in College. I can't break bad habits.</p>
</section>
</section>
<p>Hello world!!!</p>
</div>
<ul class="pager" style="margin-right: 700px">
<li><a href="#Article1">1</a></li>
<li><a href="#Article2">2</a></li>
<li><a href="#Article3">3</a></li>
<li><a href="#Article4">4</a></li>
<li><a href="#Article5">5</a></li>
</ul>
</body>
</html>