Question

好吧，我在点击链接时尝试隐藏<p>标记，并在同一时刻打开另一个<p>标记。

但是，我知道这很容易，但我无法让它工作......

那么，有人可以check my jsFiddle吗？我做错了什么，我无法让它发挥作用。

HTML

<a onclick="$('.text1').hide('slow')" onclick="$('.text2').show('slow')">Read more</a>

<p class="text1">This is a randomtext.</p>
<p class="text2">This line will rule the world one day.</p>

CSS

a {
  text-decoration: underline;
}
.text2 {
  display: none;
}

Answer 1

我建议您使用jQuery events并从JavaScript中分离HTML。（Unobtrusive JavaScript）

为您的“读我”添加一个选择器：

<a  class="readMore" >Read more</a>

在.js文件中使用它：

//using the .readMore class as a selector for the click event over it.
$('.readMore').click(function(){ 
    $('.text1').hide('slow');
    $('.text2').show('slow');
});

您可以在这里工作：http://jsfiddle.net/BCdMa/4/

Answer 2

这是你需要的吗？

<a onclick="$('.text1').hide('slow');$('.text2').show('slow')">Read more</a>

看到这个小提琴：http://jsfiddle.net/BCdMa/2/

Answer 3

您需要使用toggle方法：

<a onclick="$('.text1, .text2').toggle('slow')">Read more</a>

<p class="text1">This is a randomtext.</p>
<p class="text2">This line will rule the world one day.</p>

并像这样设置css：

a {
    text-decoration: underline;
}

.text2{
    display:none;
}

see fiddle

显示一个段落，只需点击一下即可隐藏另一个段落？

3 个答案: