2016-06-07 67 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是不可變的。 –

相關問題