0

我正在尝试根据页面的 currant queystring 更改 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()用于如果页面 url 方案没有id作为查询字符串，则不会检查未定义的变量。

于 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
$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 回答
0

如果我正确理解您的问题，则此代码应该可以做到。如果这是您所在的当前页面，我相信您正在尝试使链接处于活动状态。只需将此代码添加到您的类“”中。

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