<div id='events-tabs'> <ul> <li><a href='dba' class="burgundy-bg">DBA</a></li> <li><a href='member' class="grey-bg">Members</a></li> <li><a href='other' class="lime-bg">Other</a></li> </ul> <div id="dba"><?php renderEvents('dba'); ?> </div> <div id="member"><?php renderEvents('member'); ?> </div> <div id="other"><?php renderEvents('other'); ?> </div> </div><!-- #events-tabs --> <script> var tabs = $( "#events-tabs ul"); var tab = tabs.find("a"); tab.each(function(){ var tablink = $(this).attr("href"); $(this).click(function(e){ e.preventDefault(); $("#"+tablink+"").fadeIn(); $(this).parent("li").addClass("current"); $(this).parent("li").siblings().removeClass("current");
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css" /> <?php define("BASE_PATH", './'); require_once 'render_util.php'; renderBeginPage('home'); renderHero(); renderNews(); renderEvents(); renderEndPage(); function renderHero() { $markup = <<<MARKUP <div class='hero'> <div class='header'><b>rescue</b> the mistreated | <b>save</b> the injured | <b>love</b> the abandoned</div> <div class="adoptable"></div> </div> MARKUP; echo $markup; } function renderNews() { $markup = <<<MARKUP <div class="news"> <img class="faq-button" src="./images/faq_button.png" width="168" height="158"> <div class="header"> <img src="./images/recent_news_header.png" width="386" height="77"> </div> <div class="body"> <div class="featured"></div>