php - 投稿リストで現在の投稿アイテムを強調表示する-PHP

Question

PHP MYSQLを使用して、3列のニュースページを含むWebサイトを構築しています。

col1（中央の列）は、ニュースタイトルとニューステキストを表示します。
col2（左の列）には、最新の10件のニュースエントリのタイトルが表示されます。
col3（右の列）-月と年を表示するアーカイブ列です。

上で述べたように、[最近のニュース]列（col2）には、最新の10件のニュースエントリのタイトルが表示されます。特定のタイトルをクリックすると、col1はそのタイトルに対応するメインコンテンツを表示します。私がやりたいのは、col2でアクティブなタイトルを強調表示することです。cssとPHPを使用してこれを行う方法はありますか？

dbクエリは次のとおりです。

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>&nbsp</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>&nbsp</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）列で現在のリストアイテムを強調表示するためのサポートが必要です。私はかなり検索しましたが、ほとんどすべてのソリューションはワードペス固有のものです。前もって感謝します：）

score 1 · Accepted Answer

何をどのように強調したいのかよくわかりません。

あなたがやろうとしていると思うのは、ユーザーがそのスペースにいるときに div<li>の s に何らかの効果を追加することですか?col2

<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

編集: divで現在選択されているニュース項目をマークするcol2には、ヘッダーでそのクラスを作成し、送信された 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

1 に答える 1

Related

Reference