jQuery tab-slideshow

PIxel

by Joshua Powell

HTML

<nav>
    <a href="#" id="home" class="button">Home</a>
    <a href="#" id="about" class="button">About</a>
    <a href="#" id="work" class="button">Work</a>
    <a href="#" id="contact" class="button">Contact</a>
    <a href="#" id="blog" class="button">Blog</a>
</nav>
<section id="tabs-1">
    <p class="body" id="p-home"></p>
    <p class="body" id="p-about"></p>
    <p class="body" id="p-work"></p>
    <p class="body" id="p-contact"></p>
    <p class="body" id="p-blog"></p>
</section>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: fixed;
    background: #2b2b2b;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

nav {
    font-size: 0;
}

.button {
    display: inline-block;
    width: 20%;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background: #2b2b2b;
    color: #c1c1c1;
    text-decoration: none;
    font-family: "century gothic";
    transition: background 0.6s ease;
    -webkit-transition: background 0.6s ease;
    -moz-transition: background 0.6s ease;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
}

#home.active, #home:hover {
    background: brown;
}

#about.active, #about:hover {
    background: #c1c1c1;
}

#work.active, #work:hover {
    background: #ff9900;
}

#contact.active, #contact:hover {
    background: lightBlue;
}

#blog.active, #blog:hover {
    background: mediumSlateBlue;
}

.button.active {
    color: #f7f7f7;
}

#tabs-1 {
    position: relative;
    height: 100%;
    width: 100%:
}

.body {
    width: 100%;
    height: 100%;
    color: #2b2b2b;
    font-size: 28px;
    padding: 15px;
    transition: left 1s ease;
    -webkit-transition: left 1s ease;
    -moz-transition: left 1s ease;
    position: absolute;
    left: 100%;
    top: 0;
}

.body.active {
    left: 0;
}

#p-home, #p-about, #p-work, #p-contact, #p-blog {
    background-size: cover;
    background-position: center center;
}

#p-home {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/e/e5/Neuschwanstein_Castle_LOC_print.jpg");
}

#p-about {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Balmoral_Castle.jpg");
}

#p-work {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/6/66/Cinderella_castle_day.jpg");
}

#p-contact {
    background-image:...

JavaScript

function navActive() {

    $('#home, #p-home').addClass('active');


    $('.button').on('click', function() {
        var attr = $(this).attr('id');
        
        $('.button').removeClass('active');
        $(this).addClass('active');
        
        $('.body').removeClass('active');
        $('#p-' + attr).addClass('active');
        
        //console.log(attr);
    });
}

navActive();