2013-04-20 2 views
0

Я создал пользовательский скрипт java + css pagination для моей страницы, и я хочу выделить текущий номер страницы, showonlyone() - это функция java-скрипта, которая отображает скрытый текст из идентификатора номера div, который был скрыт с помощью css.I нужно о сделать пагинация высвечивающейся работу (изменить .Но цвет CSS фона на # 720000)Как выделить текущий номер страницы в разбивке на страницы?

Мой код:

<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> 

Я попробовал чистый метод CSS с идентификаторами:

.bt1 a#bt1, 
.bt2 a#bt2, 
.bt3 a#bt3, 
.bt4 a#bt4, 
.bt4 a#bt5 
{ 
    background-color: #720000; 
} 

И второй метод с css "c urent»селектор:

.but a.current{background-color:#720000;} 

ответ

0

Load JQuery: добавить это перед вашим </тело>

<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; 
} 

Пример: http://fiddle.jshell.net/DNkap/

+0

, что не работает. –

+0

Для обоих блоков CSS вы используете один и тот же цвет ... может быть, это причина? –

+0

цвет отличается, но я догадываюсь, что допустил некоторые ошибки, которые я не задал для текущего класса. Как сначала добавить второй класс (.current). Но спроектируйте кнопку? Следует добавить только .current, но проблема заключается в том, как создавать кнопки, которые не находятся на текущей странице. Я новичок в css. Спасибо –

Смежные вопросы