Question

我是jquery的新手。点击带有ID的li标签，我需要显示具有ID的相对div。对于例如点击锚标记ID note_1，我需要显示div ID notContent_1的内容。

以下是我的代码。

 <ul>
    <li id="note_1">1</li>
    <li id="note_2">2</li>
    <li id="note_3">3</li>
    <li id="note_4">4</li>
</ul>
<div>
    <div id="notContent_1">A</div>
    <div id="notContent_2">B</div>
    <div id="notContent_3">C</div>
    <div id="notContent_4">d</div>
</div>

点击每个li标签我需要显示相对ID的div。我不想为每个li标签编写方法。

Answer 1

您可以这样做：

$('li[id^="note_"]').click(function(){
    $('[id^="notContent_"]').hide(); // hide the other divs
    $('#notContent_'+this.id.slice(5)).show();
});

这使用"attribute starts with" selector。

Answer 2

试试这个

$('ul li').on('click', function () {
    $('div#notContent_' + $(this).text()).show().siblings().hide();
});

DEMO

编辑刚刚看到，这是考虑到您的列表文本实际上是1-4

如果文本不是1-4，你可以在包含elemens的div中添加class，并使用index和eq（）这样

$('.tab-content div:eq('+$(this).index()+')').show().siblings().hide();

DEMO

Answer 3

试试这个解决方案

$(document).ready(function(){

    //detecting and handling click on list element
    $('li').click(function(){

        var id = $(this).attr('id');
        //get the number from list item's id using regex
        var number = id.match(/\d/g);

        //showing div with id notContent_+number
        $('#notContent_'+number).show();

    });

});

Answer 4

你也可以这样做：Child Selector

    $('ul > li').on('click', function () {
        $('div#notContent_' + $(this).text()).show();
    });

DEMO

Answer 5

如果你想要简单的链接，有一个纯粹的HTML解决方案：

<ul id="links">
    <li id="note_1"><a href="#notContent_1">1</a></li>
    <li id="note_2"><a href="#notContent_2">2</a></li>
    <li id="note_3"><a href="#notContent_3">3</a></li>
    <li id="note_4"><a href="#notContent_4">4</a></li>
</ul>
<div id="notContent">
    <div id="notContent_1">A</div>
    <div id="notContent_2">B</div>
    <div id="notContent_3">C</div>
    <div id="notContent_4">d</div>
</div>

如果你想隐藏其他div并显示“selected”，你可以添加一些javascript：

$('#links').on('click', 'a', function(e){
  e.preventDefault();

  $('#notContent div').hide();
  $( $(this).attr('href') ).show();
});

如果您想要制作标签或附加条件，请使用适当的库（例如jquery-ui，bootstrap，...）

单击li标签ID的Jquery显示具有ID的reliative Div

5 个答案: