HTML ...

Question

我正在尝试根据页面的currant queystring更改div的css，目的是在左侧菜单中显示当前处于活动状态的链接。

网址格式为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。

我相信您可以通过执行以下操作将类：active添加到标记：

    <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。

Answer 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>

或者将其添加到class属性中，以便可以添加其他类。

<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>

只需确保更改每个元素的ID值== 1。

如果页面网址方案没有isset()作为查询字符串，则使用

id以便您不会检查未定义的变量。

Answer 2

如果我理解你的问题，那么这段代码就应该这样做。我相信你正在尝试使链接处于活动状态，如果这是你当前的页面。只需在您的班级“”中添加此代码。

<?php
if(isset($_GET['id']) AND $_GET['id'] == 1)
   {
    echo ' active';
   }
?>

Answer 3

也许是

的内容

<?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>

Answer 4

<?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; ?>

php - 根据查询字符串添加类：active到div

4 个答案:

HTML ...