php - JQuery を XAMPP サーバー上の CMS 制御環境 HTML/CSS/PHP に統合する

Question

JQuery を使用して Web サイトに動的機能を追加するのに苦労しています。

<table id="structure">
    <tr>
        <td id="navigation">
            <?php echo public_navigation($sel_subject, $sel_page); ?>
        </td>
        <td id="page">
            <?php if ($sel_page) { ?>
                <h2><?php echo htmlentities($sel_page['menu_name']); ?>   </h2>
                <div class="page-content">
                    <?php echo strip_tags(nl2br($sel_page['content']), "<b><br><p><a>"); ?>
                </div>
            <?php } else { ?>
                <h2>Welcome to my "to the point" news and blog mix.</h2>
            <?php } ?>
           <br />
           <?php
           // garbledeegoo starts here
           ?>
           <p>JScript Practice</p>
           <div id="jscriptprac">text</div>
           <br /> 
           <h2>To Do</h2>
        <form name="checkListForm">
            <input type="text" name="checkListItem"/>
        </form>
        <div id="button">Add!</div>
        <br/>
        <div class="list"></div>
           <?php
           // garbledeegoo ends here
           ?>
        </td>
    </tr>
</table>

問題は、コンテンツを取得する SQL ステートメントがある場合、jquery タグ セレクターでナビゲーションのスタイルを設定できないことです。

$(document).ready(function(){
$("*").hover(function(){
    $(this).stop(true, true).animate({ width:"+=25px", padding:"+=25px" });
}, function() {
    $(this).stop(true, true).animate({ width:"-=25px", width:"-=25px" });
});
});

これはすべてを選択しているだけですが、まだナビゲーションを選択していません。

<td id="navigation">
    <?php echo public_navigation($sel_subject, $sel_page); ?>
</td>

サイドナビゲーションとして一覧表示される件名やページに.animate jqueryを追加したいです。クエリ結果のスタイルを設定する方法はありますか?

正確な語彙が不足していることをお詫びします。.hover イベントでナビゲーション リンクの色を変更する代わりに、jquery を使用してマウスオーバーでアニメーション化したいと考えています。テーブルでそれを行うと、選択できないことに関係があると思いますが、それらをすべて div に変更し、既に配置されている CSS スタイルを壊さない方法がわかりません。

これはレンダリングされた HTML です

<td id="navigation"> 
 <ul class="subjects">
  <li><a href="index.php?subj=1">About Codey Buzz</a></li>
  <li><a href="index.php?subj=2">No Rubbish, Blog</a></li>
  <li><a href="index.php?subj=3">Top News</a></li>
 </ul>   
</td>

これである程度の効果は得られましたが、あまり効果的ではありません。

$(document).ready(function(){
$("ul.subjects > li").hover(function(){
    $(this).mouseenter(function() {
        $(this).animate({ width: "+=50px" }).stop(true, true);
    });
    $(this).mouseleave(function() {
        $(this).animate({ width: "-=50px" }).stop(true, true);
});
});
});