0

我是 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 标签写一个方法。

4

5 回答 5

5

例如，您可以这样做：

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

这使用“属性开始于”选择器。

于 2013-09-13T12:33:00.470 回答
2

试试这个

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

演示

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

如果文本不是 1-4，您可以将类添加到包含元素的 div 并像这样使用 index 和 eq()

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

演示

于 2013-09-13T12:33:38.377 回答
1

试试这个解决方案

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

    });

});
于 2013-09-13T12:37:55.877 回答
0

您也可以这样做：子选择器

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

演示

于 2013-09-13T12:43:11.017 回答
0

如果你想要简单的链接，有一个纯 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 并显示“选定”的，您可以添加一些 javascript ：

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

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

如果你想有标签或手风琴，使用适当的库（例如jquery-ui，bootstrap，...）

于 2013-09-13T12:45:07.850 回答