Website
我想要一个带有 php 的函数来根据我所在的站点更改特定 div 的边框。
示例:点击新闻 -> 页面:?page=news -> div#news {border-bottom: 4px solid orange;}。现在我只需要实现最后一部分，休息我已经得到了。我尝试使用这个功能:
<?php
function chosen_page ($page) {
echo '<style type="text/css">
#header_navbar div $page {
border-bottom: 4px solid #F0641D;
}';
}
?>
body {
margin: 0;
padding: 0;
background-color: #F0641D;
background-image: url("data/RLbackground.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center 0;
font-family: "Trebuchet MS", sans-serif;
color: #c4c4c4;
}
a {
color: #F0641D;
text-decoration: none;
transition: color 0.5s linear;
}
#impressum {
background-color: #383838;
width: 1000px;
margin: 16px auto;
padding: 8px 0;
text-align: center;
text-decoration: underline;
}
#heading {
font-weight: bold;
letter-spacing: 2px;
font-size: 20px;
}
#header {
width: 100%;
height: 64px;
background-color: #383838;
position: fixed;
margin-top: -80px;
}
#header_content {
width: 1000px;
margin: 0 auto;
}
#header_navbar div {
float: none;
display: inline-block;
margin-right: -5px;
border-bottom: 4px solid #505050;
transition: border-bottom 0.5s linear, background-color 0.5s linear;
}
#header_navbar div a {
display: block;
font-size: 25px;
padding: 15.5px 23px;
}
#header_navbar div:hover {
border-bottom: 4px solid #F0641D;
background-color: #505050;
}
#header_navbar div:hover a {
color: #383838}
#layout {
width: 976px;
margin: 80px auto 16px auto;
padding: 12px;
background-color: #383838;
overflow: hidden;
}
#layout_left {
float: left;
width: 684px;
margin: 0 16px -16px 0;
}
#content_left {
padding: 4px 8px;
margin-bottom: 16px;
box-shadow: 0 0 8px #F0641D;
}
#layout_right {
float: right;
width: 276px;
margin-bottom: -16px;
}
#content_right {
margin-bottom: 16px;
padding: 4px 8px;
box-shadow: 0 0 8px #F0641D;
}
#twitter_timeline {
margin-bottom: 16px;
box-shadow: 0 0 8px #F0641D;
height: 700px;
border-radius: 4px;
overflow-y: auto;
}<!DOCTYPE html>
<html>
<head>
<title>Center of Rocket League eSports!</title>
<link href="style.php" type="text/css" rel="stylesheet" />
<link href="http://quersteil.eu//data/favicon.png" type="image/png" rel="icon" >
<meta charset="UTF-8" />
<meta name="description" content="RocketLeague-Base provides every aspect of Rocket League eSports: News, Matches, Results, Events, Statistics and many more" />
</head>
<body><div id="header">
<div id="header_content">
<div id="header_navbar">
<div id="home"><a href="http://quersteil.eu/">Home</a></div>
<div id="news"><a href="index.php?page=news">News</a></div>
<div id="matches"><a href="index.php?page=matches">Matches</a></div>
<div id="results"><a href="index.php?page=results">Results</a></div>
<div id="events"><a href="index.php?page=events">Events</a></div>
<div id="stats"><a href="index.php?page=stats">Stats</a></div>
</div>
</div>
</div>
<div id="layout">
<div id="layout_left">
<div id="content_left">
<div id ="heading">Welcome to RocketLeague-Base.com!</div>
This site is currently under construction and is getting developed further and further everyday, be sure to check every now and then. When the site has finished it will be a data and information driven website
all around Rocket League, comparable towards <a href="http://www.hltv.org/" target="_blank">HLTV.org</a>. Rocket League eSports is on the rise and as are the expectations of everyone watching, to have an easy
way looking for all the eSports action surrounding Rocket League. We are in the makings of finishing the website as soon as possible, so that every Rocket League fan has a comfortable way to look at all News,
Matches, Results, Events and Stats all around the great RL-eSports Scene. No need to go to 5 different webpages anymore to look at upcoming matches or past Results, RocketLeague-Base.com is the solution!
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div><!--
--><div id="layout_right">
<div id="content_right">
Follow us on Social Media:<br>
<a href=""><img src="data/facebook.png"></a>
<a href=""><img src="data/twitter.png"></a>
</div>
<div id="twitter_timeline">
<a class="twitter-timeline"
ref="https://twitter.com/RocketLBase"
data-widget-id="739952423586934785"
data-chrome="noheader nofooter noborders transparent noscrollbar"
data-theme="dark"
data-tweet-limit="20"
data-link-color="#primary_style_color"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div><div id="impressum">
<a href="index.php?page=impressum">Impressum</a>
</div>
</body>
</html>最佳答案
懒惰的方式:
<body class="<?php echo $page; ?>">
CSS
.home #home,
.news #news, ... {
border-bottom: 4px solid #F0641D;
}
关于php - 特定站点处于事件状态时更改边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37676208/