изменение шрифта на жирный при нажатии - HTML PHP - PullRequest
0 голосов
/ 03 ноября 2011

У меня есть список в моем левом меню на сайте, как темы часто задаваемых вопросов, и при щелчке по нему справа появляется текст из базы данных MySQL, показывающий onclick.

При нажатии на элемент списка я хочу изменить настройку шрифта этих элементов на полужирный, чтобы пользователь получил визуальный индикатор того, что он выбран, и этот пользователь знает, что он находится в определенной теме часто задаваемых вопросов. Это возможно?

Вы можете в коде уже есть там onmousein и эффект onmouseout, выполненный там правильно:

<div class="boxHelpItem">
<?PHP

//Query
$result = mysql_query("SELECT * FROM faq_topics ORDER BY number ASC");
while ($row = mysql_fetch_array($result))
{
    $result1 = mysql_query("SELECT * FROM faq_questions WHERE topicid='$row[id]' ORDER BY number ASC");

    echo '<div style="height:15px; padding-top:5px; font-size:13px;">' . $row['title'] . '</div>';
    echo '<ul style=" padding-left:10px;">';
    while ($row1 = mysql_fetch_array($result1))
    {
        echo '<li style="color:#404040; font-size:12px;" onclick="faqGet(\'' . $row1['id'] . '\');" onmouseover="this.style.textDecoration = \'underline\';" onmouseout="this.style.textDecoration = \'\';">' . $row1['title'] . '</li>';
    }
    echo '</ul>';
}

?>
</div> 

1 Ответ

0 голосов
/ 03 ноября 2011

Вы можете использовать событие onclick ...

onclick="faqGet(\'' . $row1['id'] . '\'); this.style.fontWeight='bold';"

Хотя вам также нужно будет сбросить другие элементы, поэтому вы можете переместить логику из элемента в функцию. Затем вы можете перебрать элементы списка и удалить стиль, а затем установить выбранный.

Также, возможно, вы захотите немного почитать об удалении вашего JavaScript из вашего HTML, это довольно просто сделать и упростит поддержку вашего HTML.

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

a:focus { font-weight: bold; }
...