我目前正在开发一个博客布局,其中包含一个主 div 和一个带有链接的侧栏。我希望每个链接都可以更改主 div 的内容。 我尝试使用切换和 html。
这是主类和每个链接的内容:
<div id="main"></div>
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
侧边栏:
<div id="mainlink">
<button class="linkd" id="butt1"> works </button>
<button class="linkd" id="butt2"> info </button>
<button class="linkd" id="butt3"> Tags </button>
</div>
因此,当我单击“works”按钮时,我希望将该 div 的内容放入主 div 中。
这是 JQuery 的片段(不起作用):
$(function(){
$('#butt1').click(function() {
$('#main').html($('#works'));
$('#works').toggle();
$('#info').hide();
$('#tags').hide();
});
$('#butt2').click(function() {
$('#main').html($('#info'));
$('#info').toggle();
$('#works').hide();
$('#tags').hide();
});
$('#butt3').click(function() {
$('.mainp').html($('#tags'));
$('#tags').toggle();
$('#info').hide();
$('#works').hide();
});
});
注意:在我的 CSS 上,我也有 display: none。
最佳答案
我认为这是显示和隐藏 div
的简单方法,通过使用 HTML5 的 data 属性分配与按钮的关系(这里它们的 id
用于data-target
属性)。请参阅下面的片段...
$(function(){
$('[data-target]').on('click', function(){
var target = $(this).data('target');
$(target).siblings().hide().end().show();
});
});
#main > div:not(:first-child) {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainlink">
<button class="linkd" data-target="#works"> works </button>
<button class="linkd" data-target="#info"> info </button>
<button class="linkd" data-target="#tags"> Tags </button>
</div>
<div id="main">
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
</div>
关于javascript - JQuery 切换/html : changing the content in div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48472830/