Question

的javascript：

function mostrar(order) {
switch (order) {
    case 0:
        $(".hide").removeClass("show");
        $(".mostrar1").addClass("show");
        break;
    case 1:
        $(".hide").removeClass("show");
        $(".mostrar2").addClass("show");
        break;
    case 2:
        $(".hide").removeClass("show");
        $(".mostrar3").addClass("show");
        break;
    case 3:
        $(".hide").removeClass("show");
        $(".mostrar4").addClass("show");
        break;
}
}

html：

<a href="" onclick="mostrar(0);">Leer más</a>
<a href="" onclick="mostrar(1);">Leer más</a>
<a href="" onclick="mostrar(2);">Leer más</a>
<a href="" onclick="mostrar(3);">Leer más</a>
<div class="hide mostrar1">asd1</div>
<div class="hide mostrar2">asd2</div>
<div class="hide mostrar3">asd3</div>
<div class="hide mostrar4">asd4</div>

的CSS：

.hide { display: none;}
.show { display:block!important}

http://jsfiddle.net/dn69d14L/

我只是试图显示和隐藏文字。

有人可以解释一下，为什么这不起作用？

Answer 1

首先你的小提琴不包括jQuery所以它失败了。

其次，您不会取消点击事件，因此会触发链接。

将链接更改为

<a href="#" onclick="mostrar(0);">Leer más</a>

或

<a href="#" onclick="mostrar(0);return false;">Leer más</a>

甚至更好地使用jQuery附加事件并使用preventDefault（）

$(".menu").on("click", "a[data-display]", function (e) {
  e.preventDefault();
  var link = $(this);
  $(".tab-content").addClass("hide");
  $("a.active").removeClass("active");
  link.addClass("active");
  $(".mostrar" + link.data("display")).removeClass("hide");
});

.hide {
    display: none;  
}

.active{ background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
  <a href="#" data-display="1">Leer más</a>
  <a href="#" data-display="2">Leer más</a>
  <a href="#" data-display="3">Leer más</a>
  <a href="#" data-display="4">Leer más</a>  
</div>
<div class="tab-content hide mostrar1">asd1</div>
<div class="tab-content hide mostrar2">asd2</div>
<div class="tab-content hide mostrar3">asd3</div>
<div class="tab-content hide mostrar4">asd4</div>

Answer 2

您需要包含jQuery库，或使用本机JavaScript。

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

而且，由于它与库一起使用，您需要在dom准备好后加载代码：

// Shorthand for $( document ).ready()
$(function() {
    console.log( "ready!" );
    // your code !
});

Answer 3

您还没有包含jQuery库，但这是其中一个问题。当你使用jQuery时，最好不要使用inline-js。你的功能也可以变得更简单。

$('a').click(function(){
   $('.hide').hide();
   $('.mostrar' + ($(this).index() + 1))).show();
});

Answer 4

试试此演示：http://jsfiddle.net/dn69d14L/1/

<a href="javascript:void(0)" onclick="mostrar(0);">Leer más</a>
<a href="javascript:void(0)" onclick="mostrar(1);">Leer más</a>
<a href="javascript:void(0)" onclick="mostrar(2);">Leer más</a>
<a href="javascript:void(0)" onclick="mostrar(3);">Leer más</a>
<div class="hide mostrar1">asd1</div>
<div class="hide mostrar2">asd2</div>
<div class="hide mostrar3">asd3</div>
<div class="hide mostrar4">asd4</div>

当然，使用JQuery库。

Answer 5

将您的HTML更改为。

<a href="javascript:mostrar(0)">Leer más</a>
<a href="javascript:mostrar(1)">Leer más</a>
<a href="javascript:mostrar(2)">Leer más</a>
<a href="javascript:mostrar(3)">Leer más</a>
<div class="hide mostrar1">asd1</div>
<div class="hide mostrar2">asd2</div>
<div class="hide mostrar3">asd3</div>
<div class="hide mostrar4">asd4</div>

使用javascript在html上显示和隐藏文本

5 个答案:

Fiddle