1

假设我有两个锚标签和两个带有动态 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，当我按下 A2<a>标签时，只会显示 div2 而不会显示 div1。

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

4

7 回答 7

2

As you have dymanmic link and div so you need perfom operation on the basis of class

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>

and

<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;}
于 2013-05-02T11:49:43.230 回答
0

The easiest way is to give <a> and <div> something in common. This way if you have a lot of div you won't have to repeat the code over and over again

For example

<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>

And the 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

于 2013-05-02T11:49:54.540 回答
0

Beside Raj's answer you can also work with adding/removing a css-class like 'hideable' where hideable has

display: none;

于 2013-05-02T11:50:41.187 回答
0

First hide all div on click of any hyper link and show only related on

Like 

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

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

    $("a2").click(function () {
           $("#div").hide();
           $("d2").show();
    });
于 2013-05-02T11:51:06.737 回答
0

尝试这个

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

$("#a2").click(function () {
       $("#d1").hide();
       $("#d2").show();
});
});
于 2013-05-02T11:47:05.143 回答
0

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

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();
});

小提琴示例：单击

于 2013-05-02T11:49:21.427 回答
0

如果可以稍微修改 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在链接中添加了一个共同点。

于 2013-05-02T12:01:37.300 回答