如何更改点击多个div的内容 [英] How to change content of multiple divs on click

问题描述

我试图找出当点击链接时如何更改两个不同的非连续div的内容。我有一些HTML和Javascript草稿，我怀疑缺少CSS可能是实现这一目标的关键。

这里是HTML：

 < ul id =tabs> 
< li>< a href =＃>连结1< / a> 
< / li> 
< li>< a href =＃>连结2< / a> 
< / li> 
< / ul> 
< div id =tabs-container> 
< div id =content1>链接1的内容应该仅在链接1被点击时显示。< / div> 
< div id =content2>链接2的内容应该仅在链接2被点击时显示。< / div> 
< / div> 
 
< p>无关文字在这里。此区域中的文字是静态的，并且应始终显示。< / p> 
 
< div id =tabs-container-2> 
< div id =content1-2>链接1的其他内容。只有链接1被点击时才应显示。< / div> 
< div id =content2-2>链接2的其他内容。只有链接2被点击时才应显示。< / div> 
< / div> 
  

---

以下是Javascript：

  $（function（）{
 $（'＃tabs-container .tabs'）。hide（）。eq（0）。 show（）; 
 $（'＃tabs-container-2 .tabs'）。hide（）。eq（0）.show（）; 
 $（'＃tabs li'）。click （）; 
 $（'＃tabs-container。 （）; 
 $（'＃tabs-container-2 .tabs'）。hide（）。eq（num）.show（）; 
}）; 
}）; 
  

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

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

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

解决方案

试试，

<$ p $（$）$（'）$ $ $ $''$'$ $ $' （）;
$（'＃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

I am attempting to figure out how to change the content of two different, non-contiguous divs, when a link is clicked. I have some draft HTML and Javascript, and I suspect missing CSS might be the key to make this work.

Here is the 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>

---

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

I am a novice at CSS and Javascript. In fact, I deleted my attempt at CSS because it was so poor. Here is the partial jsfiddle:

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

Hope someone can help. Am I even on the right track?

解决方案

Try,

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

这篇关于如何更改点击多个div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！