Question

Website 我想要一个带有php的函数来改变特定div的边界，具体取决于我所在的网站示例：点击新闻 - ＆gt; page：？page = news - ＆gt; 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>

Answer 1

懒惰的方式：

<body class="<?php echo $page; ?>">

CSS

.home #home,
.news #news, ... {
  border-bottom: 4px solid #F0641D;
}

Answer 2

<?php 
function chosen_page ($page) {
    echo '<style type="text/css">
            #header_navbar div #'.$page.' {
                border-bottom: 4px solid #F0641D;
            }';
}
?>

试试这个。编辑

特定站点处于活动状态时更改边框

2 个答案: