Telerik Academy CSS Exam-Variant 1

task2

by Naydenov_it

HTML

<body>
    <div id="wrapper">
        <ul class="tab-strip">
            <li class="current">
                <a href="#" class="tab-btn">Tab 1</a>
                <div class="tab-content">
                    <ul>
                        <li>List Item 1
							<ul>
								<li>List Item 1
								</li>
								<li>List Item 1
								</li>
								<li>List Item 1
								</li>
								<li>List Item 1
								</li>
							</ul>
                        </li>
                        <li>List Item 1
                        </li>
                        <li>List Item 1
                        </li>
                        <li>List Item 1
                        </li>
                    </ul>
                </div>
            </li><li>
                <a href="#" class="tab-btn">Tab 2</a>
                <div class="tab-content">
                    <table>
                        <thead>
                            <tr>
                                <th>Column 1</th>
                                <th>Column 2</th>
                                <th>Column 3</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Column 1</td>
                                <td>Column 2</td>
                                <td>Column 3</td>
                            </tr>
                            <tr>
                                <td>Column 1</td>
                                <td>Column 2</td>
                                <td>Column 3</td>
                            </tr>
                            <tr>
                                <td>Column 1</td>
                                <td>Column 2</td>
                                <td>Column 3</td>
                            </tr>
                            <tr>
                                <td>Column 1</td>
                                <td>Column 2</td>
                               ...

CSS

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

body{
    font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-size:16px;
}
body div#wrapper{
    width:960px;
    margin:20px;
}
div#wrapper ul.tab-strip{
    width:325px;
    height:225px;
    border:1px solid black;
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
}
div#wrapper ul.tab-strip >li{
    display:inline-block;
    border-right:1px solid #000;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E2E2E2), color-stop(100, #B4B4B4));
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #E2E2E2 0%, #B4B4B4 100%);
    /* W3C Markup */ 
    background-image: linear-gradient(to bottom, #E2E2E2 0%, #B4B4B4 100%);
    border-bottom :1px solid black;
    border-right :1px solid black;
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 

}
div#wrapper ul.tab-strip > li:hover {
        background:#EEEEEE;
    }
   
    div#wrapper ul.tab-strip >li.current{
        background:white;
        background:none;
        border-top:none;
        border-left:none;
        border-bottom:none;
        border-right:1px solid #000;
        border-radius:0;
        font-weight:bold;
    }


     div#wrapper ul.tab-strip >li:last-of-type{
        border:none;
    }
div#wrapper ul.tab-strip >li a{
    text-decoration:none;
    color:black;
    display:inline-block;
    padding:10px 20px;
}   
div#wrapper ul.tab-strip li div.tab-content  {
    display:none;
    font-weight:normal;
}
     
div#wrapper ul.tab-strip li.current div.tab-content  {
    display:block;
    position:absolute;
    margin-left:20px;
    left:20px;
    top:70px; 
}
div#wrapper ul.tab-strip li.current div.tab-content ul{
    list-style-type:disc;
    
}

div#wrapper ul.tab-strip li.current div.tab-content ul li{
    list-style-type:disc;
   
}
 div#wrapper ul.tab-strip li.current div.tab-content ul li...

JavaScript

(function () {
	$.fn.tabStrip = function () {
		var selector = this.selector;

		function onTabBtnClick(e) {
			$(selector + " .current").removeClass("current");
			$(this).parent().addClass("current");

			if (e.preventDefault) {
				e.preventDefault();
			}
			return false;
		}
		$(selector + " .tab-btn").on("click", onTabBtnClick);
	};
})();