Зебра (четные / нечетные) строки CSS в <ul>и выпуск гиперссылок - PullRequest
Новая
       29

Зебра (четные / нечетные) строки CSS в <ul>и выпуск гиперссылок

1 голос
/ 30 августа 2011

У меня есть маленький код выбора, который должен содержать четные / нечетные строки «зебры». Я не понимаю, как изменить CSS для этого:

1, все остальные, которые будут перечислены (а не каждую секунду), должны иметь .even css

2, если кликнул один из них, он должен быть выделен жирным шрифтом

(я не мог понять, как объединить эти два вопроса)

Любая помощь будет признательна, от новичка. 

<div id="left">
<?php
$query = $pdo->prepare('SELECT id, name FROM test1 ORDER BY name ASC');
$query->execute();
?>

<ul>
  <?php foreach ($query as $i => $row) { ?>
    <li>
      <?php if ($i)?>
      <input name="checkbox_add[]" id="test_<?php echo $i ?>" type="checkbox" value="<? echo $row['id']; ?>"/>
      <label for="test_<?php echo $i ?>"><a href="test1.php?gid=<?php echo $row['id']; ?>"><?php echo $row['name']; ?></a></label>
    </li>
  <?php } ?>
</ul>
</div>

Ответы [ 2 ]

2 голосов
/ 30 августа 2011

Вы должны определить класс odd или even (зависит от того, какой из них вы хотели бы иметь чередующимся цветом) в вашем CSS.

Допустим, вы выбрали «нечетный».Затем определите счетчик в своем PHP-коде и проверьте, равен ли остаток по модулю 2 1 -> если это так, добавьте класс 'odd' к <li>.

<div id="left">
<?php
$query = $pdo->prepare('SELECT id, name FROM test1 ORDER BY name ASC');
$query->execute();
$idx = 0;
?>


<?php if ($idx % 2 == 0): ?>
    <li>
<?php else: ?>
    <li class="odd">
<?php endif; ?>
<?php 
  $idx++;
  if ($i): ?>
  ...your <input> and <label>...

Однако, выделение соответствующей строки нажатием кнопки - это то, что вы бы предпочли сделать в Javascript, так как это событие на стороне клиента, код, отвечающий на это, также принадлежит стороне клиента.Вот грубое решение, просто чтобы показать, что я имею в виду, но оно не рекомендуется в отношении чистого разделения проблем и «ненавязчивого» Javascript.В идеале вы должны поместить это в отдельный файл Javascript, который присоединяет форму обработчика событий в Javascript, это не относится к HTML, если вы хотите сохранить его в чистоте.

<input type="checkbox" onclick="this.parentNode.className='bold'" ...>
1 голос
/ 30 августа 2011

Было бы проще сделать это с помощью jquery, прототипа или чего-то подобного.Я сделал бы это с прототипом, что-то вроде этого: 

$$('ul li:nth-child(odd)').invoke('addClassName', 'alt-row'); 
// Add class "alt-row" to even table rows

Итак, выберите все нечетные элементы li и примените для него надлежащий css (invoke).Вы делаете то же самое с нечетными элементами списка, просто применяете другие css

И для жирной части просто добавьте событие onClick для каждого элемента li и задайте стиль, который будет выделять его жирным шрифтом, примерно так: 

<li onClick="this.className='bold'">Something</li>
...