我使用了一些 jQuery 来隐藏和显示页面上的某些元素。但是，在页面加载时它们都会显示。然后，当您与菜单/选项交互时，它会按预期工作。
我不希望它们同时显示，并且当我之前使用过此代码时，但我添加了
如有任何帮助，我们将不胜感激。
这是行为: https://gyazo.com/2798001dacc2daf353d845050872a3a0
这是 jQuery:
<script type="text/javascript">
$(document).ready(function () {
$('#menu').on('click', 'a', function (e) {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
$('.pbox:visible').hide(600);
$('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
e.preventDefault();
});
});
</script>
这是 html:
<ul id="menu" >
<li class="current profile-menu center"><a href="#" class="profile-links" data-id="div1"><h2 class="profile-menu">Info</h2></a></li>
<h2 class="profile-menu" style="padding-left:6px;padding-right:6px;font-size:15px;"><span>|</span></h2>
<li class="profile-menu center"><a href="#" class="profile-links" data-id="div2"><h2 class="profile-menu">Stats</h2></a></li>
</ul>
<div class="pbox" id="div1">
<table class="stat-list">
<tbody>
{% if driver.fullNationality %}
<tr>
<th scope="row" class="stat-key">
<span class="text">Nationality</span>
</th>
<td class="stat-value">{{ driver.fullNationality }}</td>
</tr>
{% endif %}
{% if driver.age %}
<tr>
<th scope="row" class="stat-key">
<span class="text">Age</span>
</th>
<td class="stat-value">{{ driver.age }}</td>
</tr>
{% endif %}
{% if driver.placeofbirth %}
<tr>
<th scope="row" class="stat-key">
<span class="text">Born</span>
</th>
<td class="stat-value">{{ driver.placeofbirth }}</td>
</tr>
{% endif %}
{% if driver.lives %}
<tr>
<th scope="row" class="stat-key">
<span class="text">Lives</span>
</th>
<td class="stat-value">{{ driver.lives }}</td>
</tr>
{% endif %}
<tr>
<th scope="row" class="stat-key">
<span class="text">Height</span>
</th>
<td class="stat-value">5ft 11</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Weight</span>
</th>
<td class="stat-value">175lbs</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Highest race finish</span>
</th>
<td class="stat-value">1 (x64)</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Date of birth</span>
</th>
<td class="stat-value">07/01/1985</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Place of birth</span>
</th>
<td class="stat-value">Stevenage, England</td>
</tr>
</tbody>
</table>
</div>
<div class="pbox" id="div2">
<table class="stat-list">
<tbody>
<tr>
<th scope="row" class="stat-key">
<span class="text">Team</span>
</th>
<td class="stat-value">Mercedes</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Wins</span>
</th>
<td class="stat-value">1</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Podiums</span>
</th>
<td class="stat-value">3</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Points</span>
</th>
<td class="stat-value">2730</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">GP's entered</span>
</th>
<td class="stat-value">11</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Championships</span>
</th>
<td class="stat-value">0</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Highest race finish</span>
</th>
<td class="stat-value">1 (x64)</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Highest grid position</span>
</th>
<td class="stat-value">1</td>
</tr>
</tbody>
</table>
</div>
最佳答案
我将这样做:
$('#menu').on('click', '.profile-tab:not(.current)', function (e) {
$('.profile-menu').removeClass('current');
$(this).addClass("current");
$('.pbox:visible').hide(600);
$('.pbox[id=' + $(this).find('.profile-links').attr('data-id') + ']').show(600);
e.preventDefault();
});.profile-menu {
display:inline-block;
}
.profile-tab a h2 {
background-color:lightgray;
border-radius:10px;
padding:3px 5px;
}
.profile-tab.current a h2 {
background-color:#005dff;
color:white
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu" >
<li class="profile-tab profile-menu current center">
<a href="#" class="profile-links" data-id="div1"><h2 class="profile-menu">Info</h2></a>
</li>
<h2 class="profile-menu" style="padding-left:6px;padding-right:6px;font-size:15px;"><span>|</span></h2>
<li class="profile-tab profile-menu center">
<a href="#" class="profile-links" data-id="div2"><h2 class="profile-menu">Stats</h2></a>
</li>
</ul>
<div class="pbox" id="div1">
<table class="stat-list">
<tbody>
{% if driver.fullNationality %}
<tr>
<th scope="row" class="stat-key">
<span class="text">Nationality</span>
</th>
<td class="stat-value">{{ driver.fullNationality }}</td>
</tr>
{% endif %}
{% if driver.age %}
<tr>
<th scope="row" class="stat-key">
<span class="text">Age</span>
</th>
<td class="stat-value">{{ driver.age }}</td>
</tr>
{% endif %}
{% if driver.placeofbirth %}
<tr>
<th scope="row" class="stat-key">
<span class="text">Born</span>
</th>
<td class="stat-value">{{ driver.placeofbirth }}</td>
</tr>
{% endif %}
{% if driver.lives %}
<tr>
<th scope="row" class="stat-key">
<span class="text">Lives</span>
</th>
<td class="stat-value">{{ driver.lives }}</td>
</tr>
{% endif %}
<tr>
<th scope="row" class="stat-key">
<span class="text">Height</span>
</th>
<td class="stat-value">5ft 11</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Weight</span>
</th>
<td class="stat-value">175lbs</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Highest race finish</span>
</th>
<td class="stat-value">1 (x64)</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Date of birth</span>
</th>
<td class="stat-value">07/01/1985</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Place of birth</span>
</th>
<td class="stat-value">Stevenage, England</td>
</tr>
</tbody>
</table>
</div>
<div class="pbox" id="div2" style="display:none">
<table class="stat-list">
<tbody>
<tr>
<th scope="row" class="stat-key">
<span class="text">Team</span>
</th>
<td class="stat-value">Mercedes</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Wins</span>
</th>
<td class="stat-value">1</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Podiums</span>
</th>
<td class="stat-value">3</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Points</span>
</th>
<td class="stat-value">2730</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">GP's entered</span>
</th>
<td class="stat-value">11</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Championships</span>
</th>
<td class="stat-value">0</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Highest race finish</span>
</th>
<td class="stat-value">1 (x64)</td>
</tr>
<tr>
<th scope="row" class="stat-key">
<span class="text">Highest grid position</span>
</th>
<td class="stat-value">1</td>
</tr>
</tbody>
</table>
</div>关于javascript - JQuery - 在页面加载时加载两个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50993883/