I have made a custom java script+css pagination for my page and I want to highlight the current page number , showonlyone() is a java script function that show the hidden text from a div number ID that was hiden with css.I need o make the pagination highlight work ( to change the .but css background color to #720000 )
My code :
<div class="butpos">
Page:
<a id="bt1" href="javascript:showonlyone('post1');" class="but"><span>1</span></a>
<a id="bt2" href="javascript:showonlyone('post2');" class="but"><span>2</span></a>
<a id="bt3" href="javascript:showonlyone('post3');" class="but"><span>3</span> </a>
<a id="bt4" href="javascript:showonlyone('post4');" class="but"><span>4</span></a>
<a id="bt5" href="javascript:showonlyone('post5');" class="but"><span>5</span></a>
</div>
I tried a pure css method with Id's :
.bt1 a#bt1,
.bt2 a#bt2,
.bt3 a#bt3,
.bt4 a#bt4,
.bt4 a#bt5
{
background-color: #720000;
}
And a second method with css "curent" selector:
.but a.current{background-color:#720000;}
Load jQuery: add this before your < /body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
HTML
<div class="butpos">
<a id="bt1" href="#" data-post-id="1" class="but"><span>1</span></a>
<a id="bt2" href="#" data-post-id="2" class="but"><span>2</span></a>
<a id="bt3" href="#" data-post-id="3" class="but"><span>3</span></a>
<a id="bt4" href="#" data-post-id="4" class="but"><span>4</span></a>
<a id="bt5" href="#" data-post-id="5" class="but"><span>5</span></a>
</div>
JS
function showonlyone(postId) {
// Your current showonlyone() code
// (rename 'postId' to the param name of your function
}
$(document).ready(function() {
$('.but', '.butpos').each(function() {
$(this).on('click', function() {
$('.but.current', '.butpos').removeClass('current');
$(this).addClass('current');
showonlyone($(this).data('postId'));
return false;
});
});
});
CSS
.but {
background-color: #0f0;
}
.current {
background-color: #720000;
}
Example: http://fiddle.jshell.net/DNkap/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.