我的要求:
我有三个不同的<div>
s。当用户点击第一个链接时,首先<div>
应显示数据。当点击第二个链接时,显示第二个 <div>
第 <div>
位置的数据.
代码:
<div id="firstdiv" >
//first div data
</div>
<div id="seconddiv">
//second div data
</div>
<div id="lastdiv">
//last div data
</div>
<ul class="footer_links">
<li><a href="#" id="firstlink"></li>
<li><a href="#" id="secondlink"></li>
<li><a href="#" id="lastlink"></li>
</ul>
当用户点击 firstlink
时,需要显示fistdiv
数据,当用户单击secondlink
时需要显示seconddiv
firstdiv
位置的数据.
为此我已经完成了 jQuery,但这不是正确的方法。
$(document).ready(function () {
$("#firstdiv").replaceWith($('#seconddiv'));
$('#seconddiv').attr('id', 'firstdiv');
});
这里我已经完成了firstdiv
替换为 seconddiv
并将 id 更改为 firstdiv
.
它在第一个 <div>
的位置显示数据。但仅显示向前。没那么落后。因为这里我要替换firstdiv
与 seconddiv
。所以这不是正确的方法。任何人都可以告诉这一点。我怎样才能向前和向后执行此操作。
最佳答案
如果您将 html 更改为以下内容:
<div id="firstdiv" class="datadiv">
//first div data
</div>
<div id="seconddiv" class="datadiv">
//second div data
</div>
<div id="lastdiv" class="datadiv">
//last div data
</div>
<ul class="footer_links">
<li><a href="#firstdiv" id="firstlink" class="link">first</a></li>
<li><a href="#seconddiv" id="secondlink" class="link">second</a></li>
<li><a href="#lastdiv" id="lastlink" class="link">third</a></li>
</ul>
您可以使用以下 jquery:
var divs = $('.datadiv');
$('.link').click(function(e) {
e.preventDefault();
divs.hide();
$($(this).attr('href')).show();
});
关于jquery - 用另一个 div-jquery 更改 div 的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16518638/