Question

这里我列出了我的div详细信息。我想知道如何使用链接更改主要div 的内容并加载子div < / strong>在主要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

使用此格式

<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();
});

Fiddle Example

Answer 2

Working Fiddle!!!

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

Answer 3

您需要使用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;
}

<强> Example Fiddle

根据链接选择更改div内容

3 个答案: