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

Question

我是 JS 的新手，我想弄清楚如何做一个简单的 JS 脚本，当用户 touch/click 在 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伪class。为此定义下一个 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 中你会添加 class 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 正在打开

JS when clicking to a div another div is opening

html

javascript

click

hover

touch