代码如下:
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">
<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,显示对应内容里的卷和章节,并且给目录里的li添加cur样式。并且点击上一页和下一页按钮可以切换显示内容里的上一页和下一页。
问题是,点击上一页和下一页按钮无法给目录里对应的LI添加cur class,请问如何解决呢?还有一个问题是,当前的代码在点按钮下一页到最后一页时再点一次才能隐藏,不能点到倒数第二页的时再点下一页隐藏。上一页也是相同问题,请问如何实现使点击下一页时到倒数第二页再点就隐藏下一页按钮,上一页在第二页点击上一页时隐藏上一页按钮呢?我的JQUERY不是特别好,所以弄了很长时间也没弄出来,还望您能够给予帮助,非常感谢!~