-1

我正在创建一个网站，其中有两个不同的按钮。

通过使用 jQuery，我想隐藏和显示两个元素。这两个元素都是文本。例如通过点击buttonA，textA应该显示，如果textB是可见的，它应该隐藏。同样通过单击buttonB，textB应该显示，如果textA可见，它应该隐藏。最初，两个文本都应该被隐藏但加载到它们的位置。

两个文本在布局上的位置相同。我已经定义了一个类（.content 是它的名字），它维护了文本的所有样式。现在我面临的问题是我在课堂上都有两个 div，但我无法为文本提供两个不同的 id。

.content {
  visibility:hidden;
  border-style: none;
  display: block;
  position: fixed;
  text-align: centre;
  z-index: 1;
  margin-top: 40%;
  margin-left: 25%;
  margin-right: 25%;
  background-color: transparent;
  font-size:2.5em;
}

这里的问题是如何为两个文本分配一些唯一的 id

<div class="content">TextA goes here<br></div>
<div class="content">TextB goes here<br></div>

所以当我使用 jquery

$("#ButtonA").click(function(){
  $("#TextA").show();$("#TextB").hide();
});

$("#ButtonB").click(function(){
  $("#TextB").show();$("#TextA").hide();
});

虽然这可能是蹩脚的问题，但我自己无法弄清楚，所以不得不问。

4

4 回答 4

7

您不必添加 id，只需使用 jQuery 获取它们 -

$("#ButtonA").click(function(){
    $('.content').eq(0).show();
    $('.content').eq(1).hide();
});

$("#ButtonB").click(function(){
    $('.content').eq(1).show();
    $('.content').eq(0).hide();    
});
于 2012-12-18T16:01:30.737 回答
0 
$("#ButtonA").click(function(){
    $('.content').eq(0).show();
    $('.content').eq(1).hide();
});

$("#ButtonB").click(function(){
    $('.content').eq(1).show();
    $('.content').eq(0).hide();    
});​

-- 也改变 --

.content {
    border-style: none;
    display: block;
    position: fixed;
    text-align: centre;
    z-index: 1;
    margin-top: 40%;
    margin-left: 25%;
    margin-right: 25%;
    background-color: transparent;
    font-size:2.5em;
    /* visibility: hidden; CHANGE THIS TO */
    display: none;
}​​

jsFiddle：http: //jsfiddle.net/gEs66/1/

于 2012-12-18T16:08:09.843 回答
-1

不确定我是否完全理解这个问题，但我会采取这样的方法：

http://jsfiddle.net/HdhKQ/

HTML

<div class="row">
    <div class="content">TextA goes here</div>
    <div class="button">TextA Button</div>
</div>

<div class="row">
    <div class="content" style="display:none">TextB goes here</div>
    <div class="button">TextB Button</div>
</div>

CSS

.button { cursor:pointer; }

.content {
border-style: none;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
margin-top: 40%;
margin-left: 25%;
margin-right: 25%;
background-color: transparent;
font-size:2.5em;
}​

JS $(".button").click(function(){

// Hide all content element
$(".content").hide();

// Show the content for the related button
$(this).parent().children('.content').show();

}); ​</p>

于 2012-12-18T16:06:17.483 回答
-3

你能解释一下为什么你不能对元素使用不同的 id 吗？

<div class="content" id="TextA">TextA goes here<br></div>
<div class="content" id="TextB">TextB goes here<br></div>
于 2012-12-18T16:00:16.707 回答