Как эффективно выделить номер выбранной страницы? - PullRequest
Новая
       21

Как эффективно выделить номер выбранной страницы?

1 голос
/ 21 сентября 2011

У меня есть цифры в <li> на html-странице, цифры представляют количество страниц: 

<ol id="numbers">

     <li class="idx">1</li>
     <li class="idx">2</li>
      ...
      ...
     <li class="idx">n</li>                         
</ol>

Количество страниц является динамическим. Как использовать jQuery для полужирного начертания текста номера страницы, сохраняя при этом текст других номеров страниц в стиле шрифта по умолчанию? Нужно ли использовать цикл for, чтобы изменить невыбранный стиль на стиль по умолчанию, когда выбран новый номер страницы?

Ответы [ 4 ]

3 голосов
/ 21 сентября 2011

http://jsfiddle.net/qE3Qm/2/

Лучшее решение - иметь .active класс css со стилями для активной страницы. И установите его на клик: 

$('#numbers li').click(function() {
    $('#numbers li.active').removeClass('active');
    $(this).addClass('active');
});
0 голосов
/ 21 сентября 2011

Я думаю, вы хотите это:

SCRIPT: 

$('ol#numbers li.idx').click(function(){
    $('ol#numbers li.idx').removeClass('bolt-style');
    $(this).addClass('bolt-style');
});

CSS: 

.bolt-style
{
    font-weight:bold;  
}

См. Пример здесь: http://jsfiddle.net/expertCode/zaW2Q

0 голосов
/ 21 сентября 2011

Предполагая существование класса .bold, который содержит ваш стиль: 

$("#number li").click(function() {
    $(this).addClass("bold").siblings().removeClass("bold");
});
0 голосов
/ 21 сентября 2011

Вы можете использовать простую функцию toggleclass и добавить к ним жирный стиль. 

<style>
  .highlight {font-weight:bold; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<body>
  <p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>
<script>
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });
</script>
</body>

Но моя версия просто выделяет текущий выбранный li и оставляет другие элементы списка в прежнем состоянии, поэтому, если этот был выбран ранее, этот код не изменяет предыдущий статус. Если вам нужно выделить только один элемент, то лучший способ удалить жирный стиль из всех элементов списка, а затем добавить жирный стиль к выбранному в данный момент элементу, как все рекомендовали ранее.

...