我有一个正在 build 中的网站，使用 PHP MYSQL，其中包含一个包含三栏的新闻页面。
col1(中间列)显示新闻标题和新闻正文。
col2(左列)显示 10 条最新新闻条目的标题。
col3(右栏)- 是显示月份和年份的文件栏。
正如我上面所说，“最近新闻”列 (col2) 显示 10 个最新新闻条目的标题。当我单击特定标题时，col1 会显示与该标题对应的主要内容。我想要做的是突出显示 col2 中的事件标题。有没有办法使用 css 和 PHP 来做到这一点？
数据库查询如下:
mysql_select_db($database_admin_conn, $admin_conn);
$query_getArchives = "SELECT DISTINCT DATE_FORMAT (news.updated, '%M %Y') AS archive, DATE_FORMAT (news.updated, '%Y-%m') AS link FROM news ORDER BY news.updated DESC";
$getArchives = mysql_query($query_getArchives, $admin_conn) or die(mysql_error());
$row_getArchives = mysql_fetch_assoc($getArchives);
$totalRows_getArchives = mysql_num_rows($getArchives);
mysql_select_db($database_admin_conn, $admin_conn);
$query_getRecent = "SELECT news.news_id, news.title FROM news ORDER BY news.updated DESC LIMIT 10";
$getRecent = mysql_query($query_getRecent, $admin_conn) or die(mysql_error());
$row_getRecent = mysql_fetch_assoc($getRecent);
$totalRows_getRecent = mysql_num_rows($getRecent);
$var1_getDisplay2 = "-1";
if (isset($_GET['archive'])) {
$var1_getDisplay2 = $_GET['archive'];
$query_getDisplay = sprintf("SELECT news.news_id, news.title, news.news_entry, DATE_FORMAT (news.updated, '%%M %%e, %%Y') AS formatted FROM news WHERE DATE_FORMAT(news.updated, '%%Y-%%m') = %s ORDER BY news.updated DESC", GetSQLValueString($var1_getDisplay2, "text"));
} elseif (isset($_GET['news_id'])) {
$var2_getDisplay3 = $_GET['news_id'];
$query_getDisplay = sprintf("SELECT news.news_id, news.title, news.news_entry, DATE_FORMAT(news.updated, '%%M %%e, %%Y') AS formatted FROM news WHERE news.news_id=%s ", GetSQLValueString($var2_getDisplay3, "int"));
} else {
mysql_select_db($database_admin_conn, $admin_conn);
$query_getDisplay = "SELECT news.news_id, news.title, news.news_entry, DATE_FORMAT (news.updated, '%M %e, %Y') AS formatted FROM news ORDER BY news.updated DESC LIMIT 3";
}
$getDisplay = mysql_query($query_getDisplay, $admin_conn) or die(mysql_error());
下面是新闻页面的 html/css 的相关摘录:
<div class="col1">
<div class="news">
<?php while($newsItem = mysql_fetch_array($getDisplay))
{ ?>
<?php $arrayNews[$getDisplay['news_id']] = $newsItem; ?>
<?php foreach($arrayNews AS $newsItem)
{ ?>
<h1> <?php echo $newsItem['title'] ; ?> <h3><?php echo $newsItem['formatted'];?></h3></h1>
<?php $query_getPhotoDetails = "SELECT *
FROM photos INNER JOIN news2photo USING (photo_id)
WHERE news2photo.news_id = '" . $newsItem['news_id'] . "' LIMIT 3
";
$getPhotoDetails = mysql_query($query_getPhotoDetails, $admin_conn) or die(mysql_error());
while($photo = mysql_fetch_array($getPhotoDetails))
{ ?>
<div class="imagefield">
<p> </p>
<p> <img src="../images/<?php echo $photo['filename']; ?>" width="200" />
</p>
</div>
<?php }
?>
<?php $newsItem['news_entry'] = preg_replace("/((http)+(s)?:\/\/[^<>\s]+)/i", "<a href=\"\\0\" target=\"_blank\">\\0</a>", $newsItem['news_entry'] ); ?>
<div class="newsitem">
<p> </p>
<p> <?php echo nl2br($newsItem['news_entry']);
?>
</p>
</div>
<?php } ?>
<?php } ?>
</div><!--end news-->
</div>
<div class="col2">
<h3>Recent News</h3>
<ul>
<?php do {
?> <li class="seperator"><a href="news.php?news_id=<?php echo $row_getRecent['news_id'];
?>"><?php echo $row_getRecent['title']; ?></a></li>
<?php } while ($row_getRecent = mysql_fetch_assoc($getRecent)); ?>
</ul>
</div>
<div class="col3"><h3>News Archives</h3>
<ul>
<?php do { ?>
<li class="seperator"><a href="news.php?archive=<?php echo $row_getArchives['link']; ?>"><?php echo $row_getArchives['archive']; ?></a></li>
<?php } while ($row_getArchives = mysql_fetch_assoc($getArchives)); ?>
</ul>
</div>
一切正常，但我需要帮助突出显示“最新消息”(col2) 列中的当前列表项。 我确实搜索了很多，但几乎所有解决方案都是特定于 wordpess 的。 提前致谢:)
最佳答案
我不太确定您想要突出显示的内容。
我认为您要做的是为 <li> 添加一些效果在 col2 中div 当用户越过那个空间时？
您可以通过在 <head></head> 之间放置这样的内容轻松实现此目的标签:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).onLoad(function(){
$('.col2 li').hover(function() { this.toggleClass('hovered'); });
});
</script>
<style type="text/css">
.hovered { background-color: black; color: white; }
</style>
这样做是在您的 <li> 上打开或关闭 CSS 类。 col2 下的标签在您的页面加载后。
编辑:在 col2 中标记当前选定的新闻元素div，在header中为其创建一个类，并根据提交的news_id应用:
<head>
<style type="text/css">
.currentItem { background-color: darkorange; }
</style>
</head>
...
<h3>Recent News</h3>
<ul>
<?php do { ?>
<li class="seperator
<?php echo (isset($_GET['news_id']) && $_GET['news_id'] == $row_getRecent['news_id']
? 'currentItem' : '') ?>">
<a href="news.php?news_id=<?php echo $row_getRecent['news_id']?>">
<?php echo $row_getRecent['title'] ?>
</a>
</li>
<?php } while ($row_getRecent = mysql_fetch_assoc($getRecent)); ?>
</ul>
EDIT2:在col3中标记当前选择的月份, 你必须标记 <li>就像这样:
<li class="seperator
<?php echo (isset($_GET['archive'] && $row_getArchives['link'] == $_GET['archive']
? 'currentItem' : '') ?>">
<a href="news.php?archive=<?php echo $row_getArchives['link'] ?>">
<?php echo $row_getArchives['archive']; ?>
</a>
</li>
关于php - 在帖子列表中突出显示当前帖子元素 - PHP，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11373462/