JQUERY点击第几个DIV下的LI显示第几个DIV下的内容。

查看：107
本文介绍了JQUERY点击第几个DIV下的LI显示第几个DIV下的内容。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问 题

可能有点混乱，我自己想着就有点乱，完全不知道如何做，特来求助。
代码如下：

目录：
<div class="novel-item">
    <h1>第一卷 卷名</h1>
    <div class="item-list">
        <ul>
            <li>章节名称1</li>
            <li>章节名称2</li>
            <li>章节名称3</li>
        </ul>
    </div>
    <h1>第二卷 卷名</h1>
    <div class="item-list">
        <ul>
            <li>章节名称1</li>
        </ul>
    </div>
    <h1>第三卷 卷名</h1>
    <div class="item-list">
        <ul>
            <li>章节名称1</li>
        </ul>
    </div>
</div>
<!--以上代码为目录-->
内容：
<div class="novel-txt">
    <div class="novel">
        <div class="nc-txt">
            <h1>第一卷 卷名</h1>
            <div class="nc-content">
                <i>章节名称1</i><br>
                章节内容1
            </div>
            <div class="nc-content" style="display: none;">
                <i>章节名称2</i><br>
                章节内容2
            </div>
            <div class="nc-content" style="display: none;">
                <i>章节名称3</i><br>
                章节内容3
            </div>
        </div>
        <div class="nc-txt" style="display: none;">
            <h1>第二卷 卷名</h1>
            <div class="nc-content" style="display: none;">
                <i>章节名称1</i><br>
                章节内容1
            </div>
            <div class="nc-txt" style="display: none;">
            <h1>第三卷 卷名</h1>
            <div class="nc-content" style="display: none;">
                <i>章节名称1</i><br>
                章节内容1
            </div>
        </div>
    </div>
</div>
<!--以上代码为文章内容-->

当前想要实现效果为：
比如：点击目录里第一卷下的章节名称1，显示文章内容里第一卷下的章节名称1。点哪个显示对应哪个，而原先显示的内容就隐藏，显示当前点击的内容，默认显示内容里第一卷第一张的内容，而目录里则默认给第一卷第一章的li加个 cur class，点击哪个就把cur给哪个请问如何使用JQUERY做到，希望能够给予帮助。。。非常感谢！~

解决方案

html

<div class="novel-catalog">
    <h1>第一卷 卷名</h1>
    <ul>
        <li>章节名称1</li>
        <li>章节名称2</li>
        <li>章节名称3</li>
    </ul>
    <h1>第二卷 卷名</h1>
    <ul>
        <li>章节名称1</li>
        <li>章节名称2</li>
        <li>章节名称3</li>
    </ul>
    <h1>第三卷 卷名</h1>
    <ul>
        <li>章节名称1</li>
        <li>章节名称2</li>
        <li>章节名称3</li>
    </ul>
</div>
<!--以上代码为目录-->
<div class="novel-text">
    <h1>第一卷 卷名</h1>
    <ul>
        <li>章节名称1</li>
        <li>章节名称2</li>
        <li>章节名称3</li>
    </ul>
    <h1>第二卷 卷名</h1>
    <ul>
        <li>章节名称1</li>
        <li>章节名称2</li>
        <li>章节名称3</li>
    </ul>
    <h1>第三卷 卷名</h1>
    <ul>
        <li>章节名称1</li>
        <li>章节名称2</li>
        <li>章节名称3</li>
    </ul>
</div>

jquery

$('.novel-catalog li').click(function(){
    var aa=$(this).index();
    var bb=$(this).parents().index('ul');
    $('.novel-text li').css('display','none');
    $('.novel-text').find('ul').eq(bb).find('li').eq(aa).css('display','block');
});

我把结构修改了一下，本质上是一样的，获取点击元素在目录结构中的索引，通过索引找到内容结构的对应位置，操作即可。

修改：动手能力有点差呀，都说了原理是一样的

$('.novel-item li').click(function() {
    var aa = $(this).index();
    var bb = $(this).parents('.item-list').index('.item-list');
    $('.novel-txt .nc-txt').css('display', 'none').eq(bb).css('display','block');
    $('.novel-txt .nc-content').css('display', 'none');
    $('.novel-txt .nc-txt').eq(bb).find('.nc-content').eq(aa).css('display', 'block');
});

按钮需求：

html

<button class="btn1">上一章</button>
<button class="btn2">下一章</button>
<div class="novel-item">
    <h1>第一卷 卷名</h1>
    <div class="item-list">
        <ul>
            <li>章节名称1</li>
            <li>章节名称2</li>
            <li>章节名称3</li>
        </ul>
    </div>
    <h1>第二卷 卷名</h1>
    <div class="item-list">
        <ul>
            <li>章节名称1</li>
        </ul>
    </div>
    <h1>第三卷 卷名</h1>
    <div class="item-list">
        <ul>
            <li>章节名称1</li>
        </ul>
    </div>
</div>
<!--以上代码为目录-->
内容：
<div class="novel-txt">
    <div class="novel">
        <div class="nc-txt">
            <h1>第一卷 卷名</h1>
            <div class="nc-content">
                <i>章节名称1</i><br> 章节内容1
            </div>
            <div class="nc-content" style="display: none;">
                <i>章节名称2</i><br> 章节内容2
            </div>
            <div class="nc-content" style="display: none;">
                <i>章节名称3</i><br> 章节内容3
            </div>
        </div>
        <div class="nc-txt" style="display: none;">
            <h1>第二卷 卷名</h1>
            <div class="nc-content" style="display: none;">
                <i>章节名称1</i><br> 章节内容1
            </div>
        </div>
        <div class="nc-txt" style="display: none;">
            <h1>第三卷 卷名</h1>
            <div class="nc-content" style="display: none;">
                <i>章节名称1</i><br> 章节内容1
            </div>
        </div>
    </div>
</div>
<!--以上代码为文章内容-->

jquery

var inner=0;
var outer=0;

$('.novel-item li').click(function() {
    inner = $(this).index();
    outer = $(this).parents('.item-list').index('.item-list');
    display();
});
                
$('.btn1').click(function(){
    inner--;
    if(inner<0){
        outer--;
        //如果eq()参数是负数，则会找到最后一个'.nc-txt'
        //为了和btn2统一，return一下；你可以试试不return的效果
        if(outer<0){
            return;
        }
        var aa=$('.nc-txt').eq(outer).find('.nc-content').length;
        inner=aa-1;
        display();
    }else{
        display();
    }
});
                
$('.btn2').click(function(){
    var aa=$('.nc-txt').eq(outer).find('.nc-content').length;
    inner++;
    if(inner==aa){
        outer++;
        inner=0;
        display();
    }else{
        display();
    }
});
                
function display(){
    $('.novel-txt .nc-txt').css('display', 'none').eq(outer).css('display', 'block');
    $('.novel-txt .nc-content').css('display', 'none');
    $('.novel-txt .nc-txt').eq(outer).find('.nc-content').eq(inner).css('display', 'block');
}

忘了跟你说了，你的结构里少写了一个div结束标签，在第二个nc-txt

修改：判断outer

var inner=0;
var outer=0;

$('.novel-item li').click(function() {
    inner = $(this).index();
    outer = $(this).parents('.item-list').index('.item-list');
    display();
});
                
$('.btn1').click(function(){
    inner--;
    if(inner<0){
        outer--;
        if(outer<0){
            outer=$('.nc-txt').length-1;
        }
        var aa=$('.nc-txt').eq(outer).find('.nc-content').length;
        inner=aa-1;
        display();
    }else{
        display();
    }
});
                
$('.btn2').click(function(){
    var aa=$('.nc-txt').eq(outer).find('.nc-content').length;
    inner++;
    if(inner==aa){
        outer++;
        if(outer==$('.nc-txt').length){
            outer=0;
        }
        inner=0;
        display();
    }else{
        display();
    }
});
                
function display(){
    $('.novel-txt .nc-txt').css('display', 'none').eq(outer).css('display', 'block');
    $('.novel-txt .nc-content').css('display', 'none');
    $('.novel-txt .nc-txt').eq(outer).find('.nc-content').eq(inner).css('display', 'block');
}

修改：末尾隐藏按钮。差不多可以了，要自己动手啊

var inner=0;
var outer=0;

$('.novel-item li').click(function() {
    inner = $(this).index();
    outer = $(this).parents('.item-list').index('.item-list');
    display();
});
                
$('.btn1').click(function(){
    $('.btn2').prop('disabled',false);
    inner--;
    if(inner<0){
        outer--;
        if(outer<0){
            outer++;
            inner++;
            $(this).prop('disabled',true);
            return;
        }
        var aa=$('.nc-txt').eq(outer).find('.nc-content').length;
        inner=aa-1;
        display();
    }else{
        display();
    }
});
                
$('.btn2').click(function(){
    $('.btn1').prop('disabled',false);
    var aa=$('.nc-txt').eq(outer).find('.nc-content').length;
    inner++;
    if(inner==aa){
        outer++;
        if(outer==$('.nc-txt').length){
            outer--;
            inner--;
            $(this).prop('disabled',true);
            return;
        }
        inner=0;
        display();
    }else{
        display();
    }
});
                
function display(){
    $('.novel-txt .nc-txt').css('display', 'none').eq(outer).css('display', 'block');
    $('.novel-txt .nc-content').css('display', 'none');
    $('.novel-txt .nc-txt').eq(outer).find('.nc-content').eq(inner).css('display', 'block');
}

这篇关于JQUERY点击第几个DIV下的LI显示第几个DIV下的内容。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆