2016-06-07 42 views
0

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 { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t background-color: #F0641D; 
 
\t background-image: url("data/RLbackground.jpg"); 
 
\t background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
\t background-position: center 0; 
 
\t font-family: "Trebuchet MS", sans-serif; 
 
\t color: #c4c4c4; 
 
} 
 

 
a { 
 
\t color: #F0641D; 
 
\t text-decoration: none; 
 
\t transition: color 0.5s linear; 
 
} 
 

 
#impressum { 
 
\t background-color: #383838; 
 
\t width: 1000px; 
 
\t margin: 16px auto; 
 
\t padding: 8px 0; 
 
\t text-align: center; 
 
\t text-decoration: underline; 
 
} 
 

 
#heading { 
 
\t font-weight: bold; 
 
\t letter-spacing: 2px; 
 
\t font-size: 20px; 
 
} 
 

 
#header { 
 
\t width: 100%; 
 
\t height: 64px; 
 
\t background-color: #383838; 
 
\t position: fixed; 
 
\t margin-top: -80px; 
 
} 
 

 
#header_content { 
 
\t width: 1000px; 
 
\t margin: 0 auto; 
 
} 
 

 
#header_navbar div { 
 
\t float: none; 
 
\t display: inline-block; 
 
\t margin-right: -5px; 
 
\t border-bottom: 4px solid #505050; 
 
\t transition: border-bottom 0.5s linear, background-color 0.5s linear; 
 
} 
 

 
#header_navbar div a { 
 
\t display: block; 
 
\t font-size: 25px; 
 
\t padding: 15.5px 23px; 
 
} 
 

 
#header_navbar div:hover { 
 
\t border-bottom: 4px solid #F0641D; 
 
\t background-color: #505050; 
 
} 
 

 
#header_navbar div:hover a { 
 
\t color: #383838} 
 

 
#layout { 
 
\t width: 976px; 
 
\t margin: 80px auto 16px auto; 
 
\t padding: 12px; 
 
\t background-color: #383838; 
 
\t overflow: hidden; 
 
} 
 

 
#layout_left { 
 
\t float: left; 
 
\t width: 684px; 
 
\t margin: 0 16px -16px 0; 
 
} 
 

 
#content_left { 
 
\t padding: 4px 8px; 
 
\t margin-bottom: 16px; 
 
\t box-shadow: 0 0 8px #F0641D; 
 
} 
 

 
#layout_right { 
 
\t float: right; 
 
\t width: 276px; 
 
\t margin-bottom: -16px; 
 
} 
 

 
#content_right { 
 
\t margin-bottom: 16px; 
 
\t padding: 4px 8px; 
 
\t box-shadow: 0 0 8px #F0641D; 
 
} 
 

 
#twitter_timeline { 
 
\t margin-bottom: 16px; 
 
\t box-shadow: 0 0 8px #F0641D; 
 
\t height: 700px; 
 
\t border-radius: 4px; 
 
\t overflow-y: auto; 
 
}
<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
\t <title>Center of Rocket League eSports!</title> 
 
\t <link href="style.php" type="text/css" rel="stylesheet" /> 
 
\t <link href="http://quersteil.eu//data/favicon.png" type="image/png" rel="icon" > 
 
\t <meta charset="UTF-8" /> 
 
\t <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"> 
 
\t <div id="header_content"> 
 
\t \t <div id="header_navbar"> 
 
\t \t \t <div id="home"><a href="http://quersteil.eu/">Home</a></div> 
 
\t \t \t <div id="news"><a href="index.php?page=news">News</a></div> 
 
\t \t \t <div id="matches"><a href="index.php?page=matches">Matches</a></div> 
 
\t \t \t <div id="results"><a href="index.php?page=results">Results</a></div> 
 
\t \t \t <div id="events"><a href="index.php?page=events">Events</a></div> 
 
\t \t \t <div id="stats"><a href="index.php?page=stats">Stats</a></div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
<div id="layout"> 
 
\t <div id="layout_left"> 
 
\t \t <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 
 
\t \t 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 
 
\t \t 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, 
 
\t \t 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"> 
 
\t 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. 
 
\t 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, 
 
\t 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"> 
 
\t 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. 
 
\t 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, 
 
\t 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"> 
 
\t 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. 
 
\t 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, 
 
\t 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> 
 
\t </div><!-- 
 
\t 
 
\t --><div id="layout_right"> 
 
\t \t <div id="content_right"> 
 
\t \t \t Follow us on Social Media:<br> 
 
\t \t \t <a href=""><img src="data/facebook.png"></a> 
 
\t \t \t <a href=""><img src="data/twitter.png"></a> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div id="twitter_timeline"> 
 
\t \t \t \t <a class="twitter-timeline" 
 
\t \t \t \t ref="https://twitter.com/RocketLBase" 
 
\t \t \t \t data-widget-id="739952423586934785" 
 
\t \t \t \t data-chrome="noheader nofooter noborders transparent noscrollbar" 
 
\t \t \t \t data-theme="dark" 
 
\t \t \t \t data-tweet-limit="20" 
 
\t \t \t \t data-link-color="#primary_style_color"></a> 
 
\t \t \t \t <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> 
 
\t \t </div> 
 
\t </div> 
 
</div><div id="impressum"> 
 
\t <a href="index.php?page=impressum">Impressum</a> 
 
</div> 
 
</body> 
 

 
</html>

回答

2

偷懒的办法:

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

CSS

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

我有一个style.php,所以我可以做到这一点吗?:。<?php echo $ page;回声“#”; echo $ page;?>'... – iwillieyou

+0

当然,试试吧。唯一相关的PHP代码在html文档中。 – Aziz

+0

对不起,我总是忘记输入文章的评论...现在评论完成 – iwillieyou

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

试试这个。编辑

+0

不会是''#$ page''作为即时通讯在div中使用id? – iwillieyou

+0

谢谢,请问做了什么:。$ page。 – iwillieyou

+0

它会回显$ page的值,否则会认为$ page是不可变的。 –

相关问题