根据链接选择更改div内容

Question

这里我列出了我的div细节，我想知道如何通过使用链接改变主div的内容，并在主div中加载子div。

link 1 : link 2: link 3 :link 4

<div id="main">
    <div>diplay1</div>
    <div>diplay2</div>
    <div>diplay3</div>
    <div>diplay4</div>
</div>

请给我建议。

Answer 1

您需要使用JS / JQuery、CSS和类来实现这一点。

带有类、href和自定义属性的HTML。

<a class="linked" data-link="content1" href="#">Link1</a>
<a class="linked" data-link="content2" href="#">Link2</a>
<a class="linked" data-link="content3" href="#">Link3</a>

<div id="main">
    <div class="content1">diplay1</div>
    <div class="content2">diplay2</div>
    <div class="content3">diplay3</div>
</div>

JQuery代码

$('a.linked').on('click', function(e){
    $('div.' + $(this).attr('data-link')).show().siblings().hide();
    /* this will select and show div with class 
       which is in the custom attribute data-link of the clicked link. 
       Then it will select all of its sibling elements 
       i.e. all within this parent and no children if any 
       except the first selected div and will hide them. */
});

CSS样式

#main *{
    display:none;
}

示例Fiddle

Answer 2

使用此格式

<div id="main">
    <div>diplay1</div>
    <div>diplay2</div>
    <div>diplay3</div>
    <div>diplay4<div>ok</div></div>
</div>

<div>
  <a href='javascript:;' class='link'>1</a>
  <a href='javascript:;' class='link'>2</a>
  <a href='javascript:;' class='link'>3</a>
  <a href='javascript:;' class='link'>4</a>
</div>

然后用一个小脚本

$('.link').click(function(){
   $('#main > div').hide().eq($(this).index()).show();
});

小提琴例子

Answer 3

工作！

$('#main a').click(function() {
    $('div:not(#main)').hide();
    $($(this).attr('href')).show();
    return false;
});