单击时将字体更改为粗体-HTML PHP

Question

I have a list on my left menu on site like FAQ topics, and when click on it on the right side different text from MySQL db showing onclick.

When a list item is clicked on I want to change that items font setting to bold so that the user gets a visual indicator that it's been selected and that user know he is on specific FAQ topic. Is this possible?

You can is in code already have there onmousein and onmouseout effect done correctly there:

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

Answer 1

You could use the onclick event...

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

Although you will also need to unset the other items, so you may want to move the logic out of the element into a function. You could then loop over the list items and remove the styling, and then set the selected one.

Also, you might want to read up a bit on removing your JavaScript from your HTML, it is quite easy to do and will make your HTML easier to maintain.

My final point would be that if you made each FAQ a proper link, you could provide fallback behaviour for JavaScript fails, and also use CSS to style the current item...

a:focus { font-weight: bold; }