JQUERY
var inner=0;
var outer=0;
$('.novel-item li').eq(0).addClass('cur');
$('.novel-item li').click(function() {
inner = $(this).index();
outer = $(this).parents('.item-list').index('.item-list');
display();
});
$('.btn1').click(function(){
$('.item-list li').removeClass('cur');
$('.item-list li').eq(inner).addClass('cur');
$('.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');
}
HTML
目录
----------
<div class="btn1">上一章</div>
<div class="btn2">下一章</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" id="novelTxt">
<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>
<!--以上代码为文章内容-->
以上代码只能实现点击目录里的章节名称对应显示多少卷下章节名及内容,以及点击上一页和下一页切换上一页或下一页内容,但最终想要实现的是,点击上一页或下一页不仅可以显示对应内容还可以自动对应目录里的章节给当前li添加cur,按钮在倒数第二页点击下一页时自动隐藏,第二页点上一页自动隐藏上一页。因为HTML结构都是自动获取的,所以是固定的,无法修改。。。我对JQUERY属于新手,最好能够写代码,T-T,这个我研究好些天了,因为一直无法解决,相当着急,如果可以,还望能够帮忙解决,先谢谢啦!~
哥们儿,别邀请我了,都给你写了个完整实例,结构啥的也跟你说了,你自己应该好好专研,而不是什么都伸手要,这样对你自己不好,你应该学会静下心来思考。