Question

我试图弄清楚如何在点击链接时更改两个不同的非连续div的内容。我有一些草案HTML和Javascript，我怀疑缺少CSS可能是使这项工作成为关键。

这是HTML：

<ul id="tabs">
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
</ul>
<div id="tabs-container">
<div id="content1">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>

<p>Unrelated text is here. Text in this area is static and should display at all times.</p>

<div id="tabs-container-2">
<div id="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>

这是Javascript：

$(function () {
$('#tabs-container .tabs').hide().eq(0).show();
$('#tabs-container-2 .tabs').hide().eq(0).show();
$('#tabs li').click(function () {
    num = $('#tabs li').index(this);
    $('#tabs-container .tabs').hide().eq(num).show();
    $('#tabs-container-2 .tabs').hide().eq(num).show();
});
});

我是CSS和Javascript的新手。事实上，我删除了我对CSS的尝试，因为它太差了。这是部分jsfiddle：

http://jsfiddle.net/Fbx_Steve/GbaMx/14/

希望有人可以提供帮助。我甚至走在正确的轨道上吗？

Answer 1

尝试，

$(function () {
    $('#tabs-container div').hide().eq(0).show();
    $('#tabs-container-2 div').hide().eq(0).show();

    $('#tabs li').click(function () {
        $('#tabs-container div').hide()
        $('#tabs-container-2 div').hide()
        num = $('#tabs li').index(this);
        $('#tabs-container div').hide().eq(num).show();
        $('#tabs-container-2 div').hide().eq(num).show();
    });
});

DEMO

Answer 2

这是你之后的事吗？

http://jsfiddle.net/GbaMx/16/

我为每个链接添加了一个ID，当点击该链接时，切换了相应的内容。

我将它们分为2个类.c1 .c2，内容1和内容2

Answer 3

更新JSFiddle：http://jsfiddle.net/GbaMx/18/

你的Javascript完全没问题。但是，当没有定义此类时，您试图引用tabs类。因此，我必须使用content-x的ID更新HTML，以使其具有tabs类。

Answer 4

试试这个

JQUERY CODE：

$(function () {
  $('#tabs-container div').hide();
  $('#tabs-container-2 div').hide();
  $('#tabs li a').on('click', function (event) {
    event.preventDefault();
    num = $(this).parent().index();
    $('#tabs-container div').eq(num).slideToggle();
    $('#tabs-container-2 div').eq(num).slideToggle();
  });
});

现场演示： http://jsfiddle.net/dreamweiver/GbaMx/22/

你的代码中缺少一些东西，所以我稍微调了一下。

快乐编码：）

Answer 5

试试这个：

HTML

<ul id="tabs">
    <li><a id="link1" href="#">Link 1</a>
    </li>
    <li><a id="link2" href="#">Link 2</a>
    </li>
</ul>
<div id="tabs-container">
    <div id="content1" class="contents">Content for link 1. Should display only when Link 1 is clicked.</div>
    <div id="content2" class="contents">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>

<p>Unrelated text is here. Text in this area is static and should display at all times.</p>

<div id="tabs-container-2">
    <div id="content1-2" class="contents">Additional content for link 1. Should display only when Link 1 is clicked.</div>
    <div id="content2-2" class="contents">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>

的javascript

$( document ).ready(function() {
    // hide tabs
     $('.contents').hide();

    $('#link1').click( function() {
        $('#content1,#content1-2').show();
        return false;
    });
    $('#link2').click( function() {
        $('#content2,#content2-2').show();
        return false;
    });
});

请参阅演示：http://jsfiddle.net/Magicianred/BV2kS/1/

享受您的代码

Answer 6

它使你只能错过一个班级＆＃34;标签＆＃34;在内容divs：

<ul id="tabs">
    <li><a href="#">Link 1</a>

    </li>
    <li><a href="#">Link 2</a>

    </li>
</ul>
<div id="tabs-container">
    <div id="content1" class="tabs">Content for link 1. Should display only when Link 1 is clicked.</div>
    <div id="content2" class="tabs">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
    <div id="content1-2" class="tabs">Additional content for link 1. Should display only when Link 1 is clicked.</div>
    <div id="content2-2" class="tabs">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>

DEMO

如何在点击时更改多个div的内容

6 个答案:

DEMO