Question

所以我有一个我正在使用的布局系统，允许用户点击侧面菜单上的链接来访问某些服务。所以基本上这里是简单的html设计

        <div class="col-md-2" id="admin_menu">
            <section class="list-group">
                <a href="#" class="list-group-item">opt 1</a>
                <a href="#" class="list-group-item">opt 2</a>
                <a href="#" class="list-group-item">opt 3</a>
                <a href="#" class="list-group-item">Opt 4</a>
            </section>
        </div>
        <div class="col-md-10" id="admin_content">
            <section class="">
                Some content
            </section>
        </div>

布局正如我所希望的那样工作。左侧是小菜单，右侧是主要内容。但我的设计有一个小问题。如您所见，内容全部在一个页面上。当用户点击opt2,3,4链接时，他或她将被重定向到相应的页面，该页面也将包含侧边菜单。所以我的问题是

创建这样一个设计的最方便的方式/方法是什么？在多个界面中需要菜单。
如何使主动链接更改颜色可能整个页面都会重新加载。

这是设计的图像。第一个链接显示活动链接应具有的样式

Answer 1

include "menu.php";

menu.php包含菜单。

也适用于

require_once "menu.php";

对于问题二，给每个项目一个唯一的numbereid（listitem1, listitem2...）并在页面上创建一个样式标记：

<style>
    #listitem1 {
         whatever...
    }
</style>

取决于页面。

Answer 2

您可以尝试我为您安排的代码：

1）首先，您可以在代码中添加一些ID，以便以独特的方式识别每个链接 2）第二，你只需在html代码的主体末尾添加一些jquery代码你的想法是，当你将鼠标移到链接上时它会改变颜色，你可以自己指定颜色，当鼠标出来时它会再次改变颜色尝试我只为前三个链接做了它但是你可以为很多人做到这一点当你明白时就联系起来。

<div class="col-md-2" id="admin_menu">
            <section class="list-group">
                <a href="#" id="first" class="list-group-item">opt 1</a>
                <a href="#" id="second" class="list-group-item">opt 2</a>
                <a href="#" id="third" class="list-group-item">opt 3</a>
                <a href="#" class="list-group-item">Opt 4</a>
            </section>
        </div>
        <div class="col-md-10" id="admin_content">
            <section class="">
                Some content
            </section>
        </div>




<script>
$(document).ready(function(){
  $("#first").mouseover(function () {
    $("#first").css({
'color':'red'
});
 });

  $("#first").mouseout(function () {
    $("#first").css({
'display':'lightgray'
});
 });
 });


$(document).ready(function(){
  $("#second").mouseover(function () {
    $("#second").css({
'color':'blue'
});
 });

  $("#second").mouseout(function () {
    $("#second").css({
'display':'lightgray'
});
 });
 });


$(document).ready(function(){
  $("#third").mouseover(function () {
    $("#third").css({
'color':'yellow'
});
 });

  $("#third").mouseout(function () {
    $("#third").css({
'display':'lightgray'
});
 });
 });

</script>

Answer 3

正如@Faried所说，您可以将菜单包含在主页面中。至于第二个问题，你可以使用

<?php if(isset($_GET['page']) && $_GET['page']=="pageName") 
{ 
//style for active link 
} else
{ 
//non-active style 
}

侧面菜单，无需多页

3 个答案: