Question

我正在做一个网站，当我点击Alagoas单词“div_alagoas”出现时。当我点击BAHIA字样时，“div_alagoas and hide”“div_bahia”显示。

在这个例子中，我测试了输入Radio并且它工作正常。但我不知道如何使用标签<li> <a>。

我该怎么做？

HTML：

 <form>
      <li><a name="alagoas" id="ala">ALAGOAS </a></li>
          <br>
      <li><a name="alagoas" id="ba">BAHIA </a></li>
</form>


 <div id="div_alagoas" value="alagoas" style="border:1px solid black">

    content

 </div>
 <div id="div_bahia" value="bahia" style="border:1px solid black">

    content

 </div>

JQUERY：

   $(document).ready(function(){
    $('  ???  [name=alagoas]').change(function(){
        if(this.id == 'ala'){
                $('#div_alagoas').show();
                $('#div_bahia').hide();
        }
        else if (this.id == 'ba'){
                $('#div_bahia').show();
                $('#div_alagoas').hide();


        }
    });
});

Answer 1

好吧，如果你想要一个点击监听器：

$('[name=alagoas]').click(function(event){
    if($(event.target).attr('id') === 'ala'){
            $('#div_alagoas').show();
            $('#div_bahia').hide();
    }
    else if ($(event.target).attr('id') === 'ba'){
            $('#div_bahia').show();
            $('#div_alagoas').hide();
    }
});

另请注意，您的HTML应该更好地格式化，例如将li标记放在ul或ol

中

<ul>
    <li><a name="alagoas" id="ala">ALAGOAS </a></li>
    <li><a name="alagoas" id="ba">BAHIA </a></li>
</ul>

另一种方法是分成不同的侦听器：

$('#ala').click(function(){ 
    $('#div_alagoas').show();
    $('#div_bahia').hide();
});

$('#ba').click(function(){ 
    $('#div_alagoas').hide();
    $('#div_bahia').show();
});

当你点击每个单词/名字，某些div显示时你怎么得到？

1 个答案: