教程：给初学的几个小例子（待补充）

Posted 2020-07-21 21270

 

tag标签切换效果：

有好几个tag标签.没被选中时是灰色，被选中时是红色，并且自己被选中后，它的兄弟们又要变灰。

点击标签后，下面的内容区域，要显示和标签对应的内容。

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".tag1").click(function(){
        $(this).addClass(‘active‘).siblings().removeClass(‘active‘);    //标签切换效果。给当前激活标签加 .active。给它的兄弟们移除 .active。
        var idx = $(this).index();                            //取索引值
        $(‘.tag-body .tag-item‘).eq(idx).addClass(‘active‘).siblings().removeClass(‘active‘);//控制下面的内容的显隐。

    });
});
</script>
<style type="text/css">
ul,li{margin:0;padding:0;list-style:none;}
.tag-head .tag1{float:left;margin-right:4px;padding:5px 20px;background:#999;color:#fff;cursor:pointer;}
.tag-head .tag1.active{background:#f00;}

.tag-body{clear:both;border-top:1px solid #000;width:500px;}
.tag-body .tag-item{display:none;height:400px;background:#f8f8f8;padding:10px;}
.tag-body .tag-item.active{display:block;}
</style>
<ul class="tag-head">
    <li class="tag1 active">标签1</li>
    <li class="tag1">标签2</li>
    <li class="tag1">标签3</li>
</ul>
<ul class="tag-body">
    <li class="tag-item active">面板1</li>
    <li class="tag-item">面板2</li>
    <li class="tag-item">面板3</li>
</ul>

 

弹层关闭按钮：

点击弹层中的.close按钮，关闭弹层

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".close").click(function(){
        $(this).parent().hide();    //找到弹层按钮的父元素，关闭。
    });
});
</script>
<style type="text/css">
.box{position:relative;border:1px solid #999;width:500px;height:400px;z-index:100;}
.box .close{position:absolute;top:0;right:0;font-size:30px;line-height:1;font-family:‘Arial‘;padding:10px 20px;background:#000;color:#fff;cursor:pointer;}
</style>
<div class="box">
    <div class="close">X</div>
    <p>弹窗关闭效果</p>
</div>

 

 

..