Question

我有两个按钮，因此根据所选按钮，我想显示div：

<div class="row">
    <div class="col-sm-6 text-center" style="padding-bottom:5px">
        <button id="btnMapaMexico" type="button" name="answer" class="btn btn-primary btn-lg">CIUDAD DE MÉXICO</button>
    </div>
    <div class="col-sm-6 text-center" style="padding-bottom:5px">
        <button id="btnMapaCuidadCarmen" type="button" class="btn btn-primary btn-lg">CIUDAD DEL CARMEN</button>
    </div>
</div>

如何根据所选按钮显示某个div，我认为这样的div就像：

<div id="dirDiv"  style="display:none;" onclick="showDiv()">This is my first button</div>
<div id="dirDiv2"  style="display:none;" onclick="showDiv2()">This is my secondbutton</div>

JS和第一项似的东西（它不起作用）：

function showDiv() {
    document.getElementById('dirDiv').style.display = "block";
}

我的第一次尝试jsfiddle

有jsFiddle

Answer 1

使用css ...或click here for jsfiddle

尝试此答案

<button id="btnMapaMexico" type="button" onclick="myFunction()" name="answer" class="btn btn-primary btn-lg">CIUDAD DE MÉXICO</button>

<div id="dirDiv"  class="hide">Direccion gm
</div>



function myFunction() {
    document.getElementById("dirDiv").removeClass('hide');
}

CSS

 .hide
    {
      display:none;
    }

Answer 2

<button id="btnMapaMexico" type="button" onclick="myFunction()" name="answer" class="btn btn-primary btn-lg">CIUDAD DE MÉXICO</button>

<div id="MyDiv"  class="hide">Direction
</div>



function myFunction() {
    document.getElementById("MyDiv").removeClass('hide');
}

.hide
    {
      display:none;
    }

Answer 3

试试这个：

$('#btnMapaMexico').click(function(){
    $('#dirDiv').show();
    $('#dirDiv2').hide();
});

$('#btnMapaCuidadCarmen').click(function(){
    $('#dirDiv').hide();
    $('#dirDiv2').show();
});

Answer 4

您只需要在具有相同功能的按钮上调用click事件

@Override
public void onCreate() {
    super.onCreate();

    // initialize the singleton
    sInstance = this;
        mRequestQueue = Volley.newRequestQueue(this);
}

或者使用这个jquery：

 <div class="row">
        <div class="col-sm-6 text-center" style="padding-bottom:5px">
            <button id="btnMapaMexico" type="button" name="answer" class="btn btn-primary btn-lg" onclick="showDiv()">CIUDAD DE MÉXICO</button>
        </div>
        <div class="col-sm-6 text-center" style="padding-bottom:5px">
            <button id="btnMapaCuidadCarmen" type="button" class="btn btn-primary btn-lg" onclick="showDiv1()">CIUDAD DEL CARMEN</button>
        </div>
    </div>

    function showDiv() {
        document.getElementById('dirDiv').style.display = "block";
document.getElementById('dirDiv2').style.display = "none";
    }

    function showDiv1() {
document.getElementById('dirDiv').style.display = "none";
        document.getElementById('dirDiv2').style.display = "block";
    }

根据所选按钮显示div

4 个答案: