面包屑 - 如何根据页面更改元素?

时间:2014-07-27 22:38:30

标签: php html

我正在尝试创建一个论坛软件,我希望当我的面包屑链接时,根据我点击的内容进行更改:

First breadcrumb

Second breadcrumb

以下是我的文件协调方式:

Folder structure

  

header.php,index.php,members.php,css / style.css

我希望元素根据点击的页面自动更改。

header.php代码:

<div id="top_bar">
    <div class="wrapper">
        <div id="top_bar_links">
            <ul>
            <?php
            $full_name = $_SERVER["PHP_SELF"];
            $name_array = explode("/",$full_name);
            $count = count($name_array);
            $page_name = $name_array[$count-1];
            ?>
            <li>
                <a class="<?php echo ($page_name=="index.php")?"active":"";?>" href="index.php">Forums</a>
            </li>
            <li>
                <a class="<?php echo ($page_name=="members.php")?"active":"";?>" href="members.php">Members</a>
            </li>
            </ul>
        </div>
    </div>
</div>
<div id="header">
    <div class="wrapper">
        <h1 id="logo">
            <a href="index.php">NextGenFocus</a>
        </h1>
        <div id="user_links">
            <ul>
                <li id="sign_up">
                    <a href="sign_up.php">Sign Up</a>
                </li>
                <li id="sign_in">
                    <a href="sign_in.php">Sign In</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="wrapper">
    <div id="container">
        <div id="breadcrumb_top">
            <div class="breadcrumb_links">
                <ul>
                    <li class="forums">
                        <a href="index.php">Forums</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

index.php和members.php代码:

<?php
include "header.php";
?>

style.css代码:

/* CORE */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin: 0;
}

h1 {
    font-size: 25px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 17px;
}

h5 {
    font-size: 15px;
}

h6 {
    font-size: 13px;
}

    body {
        background-color: #e6e9ed;
        color: #000;
        font-family: "Trebuchet MS", sans-serif;
        font-size: 13px;
        margin: 0;
        padding-bottom: 15px;
    }

    .wrapper {
        width: 980px;
        margin: 0 auto;
    }

    a {
        color: #4d7799;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    p {
        margin: 0;
    }

    /* TOP BAR */
    #top_bar {
        background-color: #262d35;
        height: 55px;
    }

    #top_bar_links ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #top_bar_links a {
        color: #fff;
        opacity: 0.6;
        float: left;
        display: block;
        line-height: 55px;
        padding: 0 25px;
    }

    #top_bar_links a:hover {
        background-color: #000;
        opacity: inherit;
        text-decoration: none;
    }

    #top_bar_links a.active {
        background-color: #000;
        opacity: inherit;
    }

    #top_bar_links a:hover {
        background-color: #000;
        opacity: inherit;
        text-decoration: none;
    }

    /* HEADER */
    #header {
        background-color: #3d5e78;
        height: 115px;
        margin-bottom: -25px;
    }

    #logo {
        float: left;
    }

    #logo a {
        color: #fff;
        font-size: 25px;
        line-height: 90px;
    }

    #logo a:hover {
        text-decoration: none;
    }

    #user_links li {
        float: right;
    }

    #user_links ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #user_links a {
        color: #fff;
        line-height: 90px;
        margin-left: 15px;
    }

    /* CONTAINER */
    #container {
        background-color: #fff;
        box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
        padding: 15px;
    }

    #breadcrumb_top {
        background-color: #f5f5f5;
        height: 45px;
        margin: -15px -15px 15px -15px;
    }

    #breadcrumb_bottom {
        background-color: #f5f5f5;
        height: 45px;
        margin: 0 -15px -15px -15px;
    }

    .breadcrumb_links ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .breadcrumb_links li {
        float: left;
    }

    .breadcrumb_links a {
        color: #000;
        line-height: 45px;
        margin-left: 15px;
    }

    .separator {
        margin-left: 10px;
    }

1 个答案:

答案 0 :(得分:0)

似乎你需要在现有的地方放置一些动态的东西&#39;论坛&#39;。你在变量$page_name中有你的页面名(members.php),所以试试这个:

<?php echo ucfirst(str_replace('.php', '', $page_name)) ?>

这将删除&#34; .php&#34;从字符串(所以它变成&#34;成员&#34;)然后大写第一个字母(所以它变成&#34;成员&#34;)。如果你需要进一步调整它,不要害怕尝试其他一些字符串操作!