I have a short script which loads content of a given link into an element. The content depends on the id of the link clicked. The problem I'm facing is that it never loads the content on the first click. I need to click on another main link and only then it loads. Let you show you what I've got:
<div class="mainTabs">
<ul>
<li class="activeTab"><a href="#skills">Skills</a></li>
<li id="secondTab"><a href="#certificates">Certificates</a></li>
</ul>
<div class="tabsContent">
<div id="skills" class="tab active">
{% include "./_skills.html" %}
</div>
<div class="tab" id="certificates">
{% include "./_certsList.html" %}
</div>
</div>
And Jquery is:
$(document).ready(function(){
$('.textBox h3').load("{% url 'aboutme' %}");
$('.row li').on('click', function(e){
e.preventDefault();
$('.activeSkill').removeClass('activeSkill');
$(this).find('a').addClass('activeSkill');
var link = $(this).find('a').attr('href');
$('.textBox h3').load(link);
});
});
Let's say I click on 'Certificates'. The page below is not loaded at first, only if I click on another link then it loads. What could be the problem here?
Im struggling to understand this without a full example, but my interpretation of this is that the logic appears to be wrong :
The following line removes all 'activeSkill' classes from the DOM.
$('.activeSkill').removeClass('activeSkill');
The next line adds the 'activeSkill' class to the <a>
under the <li>
that was clicked... was that intended?
$(this).find('a').addClass('activeSkill');
Can you explain what the role of activeSkill
is? Also shouldn't you be setting the active
class on the selected tab <div>
, and removing it from the currently active <div>
?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.