jQuery在Div中更改内容 [英] jQuery changing content inside Div
问题描述
嗨
由于我的代码编写不正确，我很可能很难找到问题的答案.
I am having difficulty in finding answer to my question most likely because my code is not being written in the correct manner.
我正在制作具有5个不同选项的主网页，我希望当用户单击选项id时在Div容器内显示不同的内容.到目前为止，我设法编写了两个选项以在单击时显示不同的内容，但在第三，第四和第五个选项上却无法做到相同.
请参阅下面的代码，如果问得太多，请您告诉我.
ps:我是开发的初学者，所以请不要花太多时间:).
I am making main web page with 5 different options to choose from and I want to make that when user clicks on options id displays different content inside Div container. So far I managed to code two options to show different content on click but not able to do the same on third, fourth and fifth option.
Please see code bellow and if not to much to ask please can you advise me.
ps: I am total beginner at developing so please do not lough to much :).
所以下面的第一个是我的HTML:
So first one below is my HTML:
jQuery(document).ready(function($) {
$('#one').on('click', function() {
if ($('.container2').css('display') != 'none') {
$('.container').show().siblings('div').hide();
}
});
});
jQuery(document).ready(function($) {
$('#two').on('click', function() {
if ($('.container').css('display') != 'none') {
$('.container2').show().siblings('div').hide();
}
});
});
jQuery(document).ready(function($) {
$('#three').on('click', function() {
if ($('????????').css('display') != 'none') {
$('.container3').show().siblings('div').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="body">
<header class="mainHeader">
<nav>
<ul>
<li><a id="one" href="#">ONE</a>
</li>
<!--class="active"-->
<li><a id="two" href="#">TWO</a>
</li>
<li><a id="three" href="#">THREE</a>
</li>
<li><a id="four" href="#">FOUR</a>
</li>
<li><a id="five" href="#">FIVE</a>
</li>
</ul>
</nav>
</header>
<div class="container">
<div class="mainContent">
<p>TEXT and ETC</p>
</div>
</div>
<div class="container2" style="display: none;">
<div class="content2">
<p>TEXT and ETC</p>
</div>
</div>
<div class="container3" style="display: none">
<div class="mainContent3">
<p>TEXT and ETC</p>
</div>
</div>
<div class="container4" style="display: none">
</div>
<div class="container5" style="display: none">
</div>
因此，当我单击一个"选项时，它将显示Div容器中的内容一个.当我单击两个"选项时，它显示了我为容器2选项两个"编码的不同内容，但是当我单击选项三"时，它显示了容器3的内容，但是单击后，我无法返回到2个或1个选项
So when I click on 'one' option it shows content inside Div container one. When I click 'two' option it shows different content that I coded for container 2 option 'two' but when I click on option 'three' it displays container 3 content but after clicked I m not able to go back to 2 or 1 options.
我希望这没什么要问的.预先感谢.
I hope this is not to much to ask. Thanks in advance.
推荐答案
希望这会有所帮助
$(document).ready(function() {
$(".menu").click(function() {
var selectedContainerId = $(this).attr("data-target");
//show the selected container
var selectedContainer = $(selectedContainerId);
selectedContainer.show();
//hide others
$('div[id*="container_"]').not(selectedContainer).hide();
});
});
div[id*="container_"] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header class="mainHeader">
<nav>
<ul>
<li><a class="menu" data-target="#container_one" href="#">ONE</a></li>
<!--class="active"-->
<li><a class="menu" data-target="#container_two" href="#">TWO</a></li>
<li><a class="menu" data-target="#container_three" href="#">THREE</a></li>
<li><a class="menu" data-target="#container_four" href="#">FOUR</a></li>
<li><a class="menu" data-target="#container_five" href="#">FIVE</a></li>
</ul>
</nav>
</header>
<div id="container_one">
<div class="mainContent">
<p> TEXT and ETC 1 </p>
</div>
</div>
<div id="container_two">
<div class="mainContent">
<p> TEXT and ETC 2 </p>
</div>
</div>
<div id="container_three">
<div class="mainContent">
<p> TEXT and ETC 3 </p>
</div>
</div>
<div id="container_four">
<div class="mainContent">
<p> TEXT and ETC 4 </p>
</div>
</div>
<div id="container_five">
<div class="mainContent">
<p> TEXT and ETC 5 </p>
</div>
</div>
这篇关于jQuery在Div中更改内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
