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

发布于 12-13 16:15 字数 1012 浏览 6 评论 0原文

我的网站左侧菜单上有一个列表,例如常见问题解答主题,当单击右侧的列表时,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> 

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> 

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

荒芜了季节2024-12-20 16:15:55

您可以使用 onclick 事件...

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

尽管您还需要取消设置其他项目,因此您可能希望将逻辑从元素移到函数中。然后,您可以循环列表项并删除样式,然后设置选定的项。

另外,您可能需要阅读一些有关从 HTML 中删除 JavaScript 的内容,这很容易做到,并且将使您的 HTML 更易于维护。

我的最后一点是,如果您为每个常见问题解答提供了适当的链接,则可以为 JavaScript 失败提供后备行为,并且还可以使用 CSS 来设置当前项目的样式...

a:focus { font-weight: bold; }

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; }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文