Question

假设我有两个锚标签和两个具有动态ID的div。例如：

<a id='a1' href="somepage">A1</a>& <a id='a2' href="somepage">A2</a>

和

<div id='d1' >Text1 </div> & <div id='d2' >Text2 </div>

最初，不显示所有div。但是当我按下A1 <a>标签时，只显示div1＆amp;当我按下A2 <a>标签时，只显示div2并且不会显示div1。

如何使用jQuery和PHP实现这一点？

Answer 1

因为你有dymanmic链接和div所以你需要执行操作在班级

的基础上

<强> HTML： -

<a id='a1' data-id="1" class="link" href="somepage">A1</a>
<a id='a2' data-id="2" class="link" href="somepage">A2</a>

和

<div id='d1' class="content_div" >Text1 </div>
<div id='d2' class="content_div">Text2 </div>

Jquery： -

  $('.link').click(function(){
        var id_no = $(this).data('id');
        $('.content_div').hide();
        $('#d'+id_no).show(); 

  });

<强> CSS： -

 .content_div {display :none;}

Answer 2

试试这个

$(document).ready(function(){
       $("#d1").hide();
       $("#d2").hide();
$("#a1").click(function () {
       $("#d1").show();
       $("#d2").hide();
});

$("#a2").click(function () {
       $("#d1").hide();
       $("#d2").show();
});
});

Answer 3

我不知道我是否理解你，这是你需要的东西：

HTML：

<a id="display1" href="#">Display 1</a>
<a id="display2" href="#">Display 2</a>
<div style="display: none;" id="div1">1</div>
<div style="display: none;" id="div2">2</div>

JS：

$("#display1").click(function(){
  $("#div1").show();
  $("#div2").hide();
});

$("#display2").click(function(){
  $("#div2").show();
  $("#div1").hide();
});

小提琴示例：click

Answer 4

最简单的方法是给<a>和<div>一些共同点。这样，如果你有很多div，你就不必一遍又一遍地重复代码

例如

<a href='#' class='showdiv' data-div='1'>A1</a>
<a href='#' class='showdiv' data-div='2'>A2</a>
<!-- data-div shows what div the button should show -->

<div class='hidden' id='box1'>one</div>
<div class='hidden' id='box2'>two</div>

和jQuery

$('.showdiv').click(function(e){
    //e.preventDefault(); //prevent the # from url or any other default
    var divID = $(this).data('div'); //get the id number
    $('.hidden').hide(); // hide all div
    $('#box'+divID).show(); //show the one you selected
});

See it in action

Answer 5

除了Raj的答案之外，您还可以使用添加/删除css类，例如'hideable'，其中hideable具有

display: none;

Answer 6

首先在点击任何超链接时隐藏所有div并仅在

上显示相关内容

喜欢

    $(document).ready(function(){
           $("#div").hide();
        });

    $("a1").click(function () {
           $("#div").hide();
            $("d1").show();
    });

    $("a2").click(function () {
           $("#div").hide();
           $("d2").show();
    });

Answer 7

如果可以稍微修改HTML，您也可以动态添加onclick事件：

<a class="tablink" id="a1" href="#">A1</a>
<a class="tablink" id="a2" href="#">A2</a>

<div id="a1-div" style="display:none">Text1</div>
<div id="a2-div" style="display:none">Text2</div>

现在javascript将onclick事件一次性添加到所有链接：

$(document).ready(function(){
    $(".tablink").each( function() {
        $(this).click( function() { $("#"+$(this).context.id+"-div").show(); } );
    });
});

我已更改div的商品ID，并为链接添加了常用的class。

如何使用Jquery和PHP实现以下功能

7 个答案: