0

ページの現在のクエリ文字列に基づいて div の css を変更しようとしています。その目的は、左側のメニューで現在アクティブなリンクを表示することです。

URL の形式は WWW.mysite.co.uk/Folder/Folder2/Page.php?id=1 になります。

HTML

    <div id="Left-Menu">

    <div id="Left-Menu-Title"><p id="Left-Menu-Title-Text">Title</p>
    </div>

    <a href="?id=1"><div class="Left-Menu-Button">
    <p class="Left-Menu-Button-Text" >Button1</p>
    </div></a>        

    <a href="?id=2"><div class="Left-Menu-Button">
    <p class="Left-Menu-Button-Text" >Button2</p>
    </div></a>

    <a href="?id=3"><div class="Left-Menu-Button">
    <p class="Left-Menu-Button-Text" >Button3</p>
    </div></a>

    </div>

CSS

    #Left-Menu-Title{
padding-top:20px;
padding-bottom:20px;
    }

    #Left-Menu-Title-Text{
padding-left:8px;
font-size:0.85em;
font-family:segoe UI;
line-height:16px;
color:#5b0400;
    }

   .Left-Menu-Button{
width:69px;
height:20px;
margin-bottom:5px;
    }

    p.Left-Menu-Button-Text{
padding-left:8px;
padding-top:1px;
font-size:0.95em;
font-family:segoe UI;
color:#a61407;
    }

    .Left-Menu-Button:hover{
background-color:#a61407;
opacity:0.6;
filter:alpha(opacity=60);
    }

    .Left-Menu-Button:hover p.Left-Menu-Button-Text, .Left-Menu-Button.hover p.Left-Menu-Button-Text {
display: block;
color:#ffffff;
    }

    .active{
width:69px;
height:20px;
margin-bottom:5px;
background-color:#a61407;
    }

    p.active{
padding-left:8px;
padding-top:1px;
font-size:0.95em;
font-family:segoe UI;
color:#ffffff;
    }

    a{
text-decoration:none;
    }

href =クエリ文字列と同じIDの場合、Class:activeをLeft-Menu-ButtonおよびLeft-Menu-Button-Textに追加するにはどうすればよいですか。

これを行うことで、 class:active を a タグに追加できると思います。

    <a href="?id=1" <?php
    if($_SERVER['QUERY_STRING'] == "?id=1")
   {
    echo ' class="active" ';
   }
   ?>
   ><div class="Left-Menu-Button">
    <p class="Left-Menu-Button-Text" >Button1</p>
    </div></a>

しかし、代わりに Left-Menu-Button と Left-Menu-Button-Text div をエコーすることは可能ですか。

4

4 に答える 4

1

PHP の$_GET変数を使用します。

<a href="?id=1" <?php if ( isset( $_GET['id'] ) && $_GET['id'] == 1 ) echo 'class="active"' ?>>
    <div class="Left-Menu-Button">
    <p class="Left-Menu-Button-Text" >Button1</p>
    </div>
</a>

または、クラス属性に追加して、他のクラスを追加できるようにします。

<a href="?id=1" class="<?php if ( isset( $_GET['id'] ) && $_GET['id'] == 1 ) echo "active " ?>new_class">
    <div class="Left-Menu-Button">
    <p class="Left-Menu-Button-Text" >Button1</p>
    </div>
</a>

== 1要素ごとに id 値を必ず変更してください。

isset()idページの URL スキームにクエリ文字列が含まれていない場合に、未定義の変数をチェックしないようにするために使用されます。

于 2013-11-09T17:42:36.163 に答える
1

多分何かの線に沿って

<?php 
$classActive = NULL;
if($_GET["id"] == 1){
    $classActive = " active";
}
?>
<a href="?id=1">
    <div class="Left-Menu-Button<?php echo $classActive; ?>">
        <p class="Left-Menu-Button-Text<?php echo $classActive; ?>" >Button1</p>
    </div>
</a>
于 2013-11-09T17:42:58.013 に答える
0

あなたの質問を正しく理解していれば、このコードでそれができるはずです。それが現在のページである場合、リンクをアクティブにしようとしていると思います。このコードをクラス "" 内に追加するだけです。

<?php
if(isset($_GET['id']) AND $_GET['id'] == 1)
   {
    echo ' active';
   }
?>
于 2013-11-09T17:42:43.057 に答える
0 
<?php
$id = false;
if(isset($_GET['id']){
   $id = $_GET['id'];
}

?>

html...

<?php if($id == '1'): ?>
  <a href="?id=1" class="active">
<?php else: ?>
  <a href="?id=1">
<?php endif; ?>
于 2013-11-09T19:07:48.163 に答える