效果图

HTML 结构

<ul id='ul1'>
                <li class="activeNav">最新团购</li>
                <li>商品特惠</li>
                <li>名品推荐</li>
                <li>缤纷活动</li>
            </ul>
            <div>
                <img src="../img/1.jpg"/>
                <img src="../img/2.jpg">
                <img src="../img/3.jpg">
                <ul>
                    <li class="activeImg">商品1</li>
                    <li>商品2</li>
                    <li>商品3</li>
                </ul>
            </div>
            <div>
                <img src="../img/4.jpg">
                <img src="../img/5.jpg">
                <img src="../img/6.jpg">
                <img src="../img/7.jpg">
                <ul>
                    <li>商品1</li>
                    <li>商品2</li>
                    <li>商品3</li>
                    <li>商品4</li>
                </ul>
            </div>
            <div>
                <img src="../img/8.jpg">
                <img src="../img/9.jpg">
                <img src="../img/10.jpg">
                <img src="../img/11.jpg">
                <ul>
                    <li>商品1</li>
                    <li>商品2</li>
                    <li>商品3</li>
                    <li>商品4</li>
                </ul>
            </div>
            <div>
                <img src="../img/1.jpg">
                <img src="../img/2.jpg">
                <img src="../img/3.jpg">
                <ul>
                    <li>商品1</li>
                    <li>商品2</li>
                    <li>商品3</li>
                </ul>
            </div>
        </div>

css 样式

body,
                ul,
                li,
                div {
                    padding: 0;
                    margin: 0;
                    list-style: none;
                    font-family: cursive;
                }
                .box {
                    width: 900px;
                    margin: 0 auto;
                    height: 308px;
                    overflow: hidden;
                }
                #ul1 {
                    width: 200px;
                    float: left;
                    height: 308px;
                }
                #ul1 li {
                    height: 75px;
                    line-height: 76px;
                    text-align: center;
                    font-size: 15px;
                    border: 1px solid #eee;
                    cursor: pointer;
                }
                #ul1 li.activeNav {
                    background: #5bc0de;
                    color: #fff;
                }
                .box div {
                    width: 700px;
                    float: right;
                    position: relative;
                    height: 308px;
                    display: none;
                }
                .box div img {
                    width: 100%;
                    height: 308px;
                }
                .box div ul {
                    width: 100%;
                    height: 30px;
                    position: absolute;
                    left: 0px;
                    bottom: 0px;
                }
                .box div li {
                    float: left;
                    margin-right: 1px;
                    cursor: pointer;
                    background: #eee;
                    line-height: 30px;
                    font-size: 12px;
                    text-align: center;
                    height: 40px;
                }
                .box div li.activeImg {
                    background: #d9534f;
                    color: #fff;
                }

JavaScript

						//获取元素
            var oUlNav = document.getElementById("ul1");
            var oLiNav = oUlNav.getElementsByTagName("li");
            var oBox = document.getElementById("box");
            var oDiv = oBox.getElementsByTagName("div");
            //初始化
            oDiv[0].style.display = "block";
            for (var i = 0 ; i<oDiv.length;i++) {
                tab(oDiv[i])
            }
            //侧栏Nav切换
            for (var i = 0 ; i<oLiNav.length ; i++) {
                oLiNav[i].index = i ;
                oLiNav[i].onclick = function(){
                    for (var i = 0 ; i<oLiNav.length ; i++) {
                        oLiNav[i].className = "";
                        oDiv[i].style.display = 'none';
                    }
                    this.className = "activeNav";
                    oDiv[this.index].style.display = 'block';
                }
            }
            function tab(obj){
                var oImg = obj.getElementsByTagName("img");
                var oLi = obj.getElementsByTagName("li");
                //长度赋值
                for (var i = 0 ; i<oLi.length; i++) {
                    oLi[i].style.width = (700/oLi.length)-(oLi.length*0.5)+"px"
                }
                //tab_img
                for (var i = 0 ; i<oLi.length;i++) {
                    oLi[i].index = i ;
                    oLi[i].onclick = function(){
                        for (var i = 0 ; i<oLi.length ; i++) {
                            oLi[i].className = ""
                            oImg[i].style.display = "none"
                        }
                        this.className = "activeImg";
                        oImg[this.index].style.display = "block"
                    }
                }
            }