listing template

now adding tabs

by Christopher Pearson

HTML

<link href='http://fonts.googleapis.com/css?family=Oswald:300,400,700' rel='stylesheet' type='text/css'>
<div class="listing-template">
    <div class="section-hdr">
        <img class="top-logo" src="http://i76.photobucket.com/albums/j39/christopherepearson1/Web%20Graphics/logo3_zpsa8816cd3.png" alt="logo" />
        <div class="nav-bar">
            <ul>
                <li><a target="_blank" href="http://stores.ebay.com/doboyo_Maternity-Fashion_W0QQfsubZ5511741012">maternity</a>
                </li>
                <li><a target="_blank" href="http://stores.ebay.com/doboyo_Womens-Fashion_W0QQfsubZ5511742012">women's</a>
                </li>
                <li><a target="_blank" href="http://stores.ebay.com/doboyo_Mens-Fashion_W0QQfsubZ5511743012">men's</a>
                </li>
                <li><a target="_blank" href="http://stores.ebay.com/doboyo_Youth-Fashion_W0QQfsubZ5511744012">youth</a>

                </li>
                <li><a target="_blank" href="http://stores.ebay.com/doboyo_Baby_W0QQfsubZ5511745012">baby</a>
                </li>
                <li><a target="_blank" href="http://stores.ebay.com/doboyo_Household_W0QQfsubZ5511751012">houshold</a>
                </li>
                <li id="unique-nav"><a target="_blank" href="http://stores.ebay.com/doboyo">STORE HOME</a>
                </li>
            </ul>
        </div>
        <!-- end navigation bar -->
    </div>
    <!-- end header section -->
    <div class="section-content">
        <div class="gallery">
            <div class="preview" align="center">
                <img name="preview" src="http://placehold.it/400" alt="">
            </div>
            <!-- end image preview div -->
            <div class="thumbnails">
                <ul>
                    <li>
                        <img onmouseover="preview.src=img1.src" name="img1" src="http://i76.photobucket.com/albums/j39/christopherepearson1/listings%20500-600/0529/0529-01-m_zps3e6ef52c.jpg" alt="Photo 1">
       ...

CSS

/***********************************************/

/*******auction listing stylesheet**************/

/****Copyright (c) chris e pearson 2013-2015****/

/***********************************************/

/**{
    padding: 0;
    margin: 0;
}*/

/*STYLE FOR MAIN LISTING CONTAINER*/
 .listing-template {
    width: 750px;
    background-color: #7496a7;
    border: 1px solid #333;
    margin-top: 0;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
}
/*BASE STYLE FOR PARAGRAPHS*/
 .listing-template p {
    font-family: oswald, sans-serif;
    color: #D7E3E9;
    font-weight: 300;
    padding-left: 15px;
}
/*BASE STYLE FOR H6 HEADERS (currently used in footer)*/
 .listing-template h6 {
    font-family: oswald, sans-serif;
    color: #D7E3E9;
    font-weight: 300;
}
/*BASE STYLE FOR THE HEADER SECTION*/
 .listing-template .section-hdr {
    padding-top: 1px;
    width: 100%;
}
/*STYLE FOR THE LOGO IMAGE*/
 .listing-template .section-hdr .top-logo {
    max-width: 350px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*STYLE FOR TOP NAV BAR WRAPPER*/
 .listing-template .nav-bar {
    width: 700px;
    /*border: 1px solid #D7E3E9;*/
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.listing-template .nav-bar ul {
    padding:0;
}
/*STYLE FOR NAV BAR LINKS (font related)*/
 .listing-template .nav-bar a {
    color: #D7E3E9;
    font-family: oswald, sans-serif;
    font-size: 14px;
    font-weight: 300;
    padding: 8px;
    text-transform: uppercase;
    text-decoration: none;
}
/*STYLE FOR NAV BAR LIST ITEMS (box related)*/
 .listing-template .nav-bar li {
    display:inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #D7E3E9;
}
/*STYLE FOR NAV BAR BOXES ON HOVER*/
 .listing-template .nav-bar li:hover {
    background-color:#2B596F;
    border: 1px dotted #D7E3E9
}
/*DEFINES A UNIQUE STYLE FOR ONE OF THE NAVBAR BUTTONS*/
 #unique-nav {
   ...

JavaScript

var Tabs = {
    className: "tabs",
    activeClass: "active",

    addEvent: function (obj, type, fn) {
        if (obj.attachEvent) {
            obj['e' + type + fn] = fn;
            obj[type + fn] = function () {
                obj['e' + type + fn](window.event);
            };
            obj.attachEvent('on' + type, obj[type + fn]);
        } else {
            obj.addEventListener(type, fn, false);
        }
    },

    create: function (tabs, callbacks) {
        if (!tabs.length) {
            this.createSingle(tabs, callbacks);
        } else {
            this.createGroup(tabs, callbacks);
        }
    },

    createSingle: function (tab, callbacks) {
        if (this.Element.hasClass(tab, this.activeClass)) {
            this.Element.show(this.getTarget(tab));
        }
        this.addEvent(tab, "click", function (e) {
            if (Tabs.callback(this, callbacks, "click", e)) {
                Tabs.Element.toggleClass(this, Tabs.activeClass);
                if (Tabs.callback(this, callbacks, "show", e)) {
                    Tabs.Element.toggleVisibility(Tabs.getTarget(this));
                }
            }
            if (e.preventDefault) { // For DOM compliant browsers http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-preventDefault
                e.preventDefault();
            } else { // For MSIE http://msdn2.microsoft.com/en-us/library/ms536913.aspx
                e.returnValue = false;
            }
        });
    },

    createGroup: function (tabs, callbacks) {
        var active,
        tab,
        i;

        function tabClickHandler(e) {
            if (Tabs.callback(this, callbacks, "click", e, active)) {
                Tabs.Element.removeClass(active, Tabs.activeClass);
                Tabs.Element.addClass(this, Tabs.activeClass);
                var from = active;
                active = this;
                if (Tabs.callback(this, callbacks, "show", e, from)) {
                   ...