Question

html这个div效果怎么实现CSS，JS都行--在线等

悬赏html这个div效果怎么实现CSS，JS都行点击选项出来4张图片





Answer 1

我自己手写的。希望采纳
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
.nav{width: 800px;}
.nav li{
width:25%;float:left;border-bottom: 3px solid #ddd;text-align: center;
position: relative;height:30px;background: #fff;
}
.nav li.on:after{
content:'';position: absolute;
left: 50%;transform: translateX(-50%);
bottom:-13px;display: block;
width: 0;height: 0;background: #5F9EA0;
border-top: 10px solid #5F9EA0;
border-left: 10px solid #efefef;
border-right: 10px solid #efefef;
}
.nav li.on{border-bottom: 3px solid cadetblue;}
.imgwrap{width: 800px;clear: both;}
.imgwrap li{display: none;width: 100%;height: 50px;background: #efefef;padding: 20px;}
.imgwrap li img{width: 100px;height: 150px;margin: 0 50px;}
.imgwrap li.on{display: block;}
</style>
<ul class="nav">
<li class="on" onclick="show(1,event)">1</li>
<li onclick="show(2,event)">2</li>
<li onclick="show(3,event)">3</li>
<li onclick="show(4,event)">4</li>
</ul>
<ul class="imgwrap">
<li id="img1" class="on">
<img src="" alt="图1" />
<img src="" alt="图1" />
<img src="" alt="图1" />
<img src="" alt="图1" />
</li>
<li id="img2">
<img src="" alt="图2" />
<img src="" alt="图2" />
<img src="" alt="图2" />
<img src="" alt="图2" />
</li>
<li id="img3">
<img src="" alt="图3" />
<img src="" alt="图3" />
<img src="" alt="图3" />
<img src="" alt="图3" />
</li>
<li id="img4">
<img src="" alt="图4" />
<img src="" alt="图4" />
<img src="" alt="图4" />
<img src="" alt="图4" />
</li>
</ul>
<script>
function show(num,e){
document.querySelectorAll('.nav li').forEach(function(item){
item.className = '';
});
e.target.className = 'on'
id = 'img'+num;
document.querySelectorAll('.imgwrap li').forEach(function(item){
item.className = '';
});
document.getElementById(id).className = 'on'
}
</script>

Answer 2

效果：

HTML代码：

<div class="activityBox">
<ul class="activityTab">
<li style="MARGIN-RIGHT: 3px" id="FlashSale" class="active">折扣专区</li>
<li style="MARGIN-RIGHT: 3px" id="NewArrivals" class="">团购推荐</li>
<li id="BeautyTuan" class="">特卖推荐</li>
</ul>
<ul style="display: block;" id="FlashSaleCenter" class="activityCenter">
中间内容区        </ul>
<ul id="NewArrivalsCenter" class="activityCenter" style="display: none;">
中间内容区        </ul>
<ul id="BeautyTuanCenter" class="activityCenter" style="display: none;">
中间内容区        </ul>
</div>

JS代码：

$(function(){   //左右切换效果
$(".activityTab li").live("hover",function(){
$(".activityTab li").removeClass("active");
$(this).addClass("active");
$(".activityCenter").css("display","none");        var activityTabID=$(this).attr("id");
$("#"+activityTabID+"Center").show();        return false;
});
});

注：素材来源于网络，版权归作者所有。以上代码仅供参考。

Answer 3

您可以在网上搜索 “tab面板”，很多这种效果，要多炫有多炫