Question

我是JS的新手，我正在试图弄清楚如何做一个简单的JS脚本，当用户触摸/点击div另一个div打开时。提前致谢。如果有人能帮助我，我会非常感激。

Answer 1

这可能会让你知道你想要什么......

<强> HTML

<div style="background-color: red">
 <a href="#" id="panel1">Panel1</a>
 <p id="pm1" style="display:none;">Message Hello From Panel1</p>
</div>

<div style="background-color: Blue">
 <a href="#" id ="panel2">Panel2</a>
 <p id="pm2" style="display:none;">Message Hello From Panel2</p>
</div>

<强> JQUERY

$('#panel1').click(function(){

 $("#pm1").show(1000);
 $("#pm2").hide(1000);

});

$('#panel2').click(function(){

 $("#pm1").hide(1000);
 $("#pm2").show(1000);

});

Answer 2

您可以使用.target伪类。为此定义下一个CSS规则：

<强> HTML：

<div class="product">
  <img src="http://placehold.it/100x100"/>
  <a href="#shoes">Show Shoes</a>
</div>

<div class="product-highlight" id="shoes">
  <p>These are the shoes</p>
</div>

<强> CSS：

#shoes {
    display: none; /* hide by default */
}
#shoes:target, /* and show either if class show is present (on click) */
#shoes.show {  /* or location hash matches id "shoes" */
    display: block;
}

并在JS中添加类show:

$(document).ready(function() {

  $('.product-highlight').hide();

  $('a[href$=shoes').click(function() {
    $('#shoes').addClass('show');
  });

});

从索引页面重定向时，您还需要设置哈希#shoes:

$(document).ready(function() {

  $('a[href$=shoes]').click(function() {

    window.location.href= 'http://sample.com/products.php/#shoes';

  });
});

Refer This page

或

$(document).ready(function(){
    $(".Test2").hide();
    $(".Test1").show();

    $('.Test1').click(function(){
        $(".Test2").slideToggle();
    });
});

WORKING FIDDLE

JS点击div时另一个div正在打开

2 个答案: