javascript - 根据链接选择改变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

Using this format

<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>

Then with a small script

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

Fiddle Example

Answer 2

工作小提琴！！！

$('#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;
}

示例小提琴