Tab选项卡功能以及单选复选功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Vivianluolita/article/details/53017915

HTML

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>修改正文排版</title>
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <link rel="stylesheet" type="text/css" href="../css/ebookMaker/wxPictureVersionModule.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/Sortable.min.js"></script>
</head>
<body>
<!-- 头部样式 -->
<div class="Top">
    <a href="wxPictureCutpicAdd.html" class="BtnCancel">取消</a>
    <a href="javascript:void(0)" class="BtnInsert" ><div class="EditOrd">插入</div></a>
    <h1>板式模块</h1>
</div>
<div class="wxPictureVersionModule">
    <div class="TabListContent">
    <ul class="TabList">
        <li class="selected Commonliend"><a><h3>图文</h3></a></li>
        <li class="Commonliend"><a><h3>标题</h3></a></li>
        <li class="Commonliend"><a><h3>正文</h3></a></li>
        <li class="Commonliend"><a><h3>背景</h3></a></li>
        <li class="Commonliend"><a><h3>分割线</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
<!--    <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>-->


    </ul>
    </div>
<!--   <ul class="TabListContentAdd">

    </ul>-->

    <div class="TabListItem">
        <div class="ListItem">
        <div class="ListItem1">
            <div class="ItemIcon">
                <img src="../css/images/../images/Mobile_bg0302.png">
            </div>
        </div>
        </div>
        <div class="ListItem">
        <div class="ListItem1-2" >
            <div class="ItemIcon">
                <img src="../css/images/../images/Mobile_bg0304.png">
            </div>
        </div>
        </div>
    </div>
    <!--标题-->
    <div class="TabListItem" style="display: none">
        <div class="ListItem">
            <div class="ListItem1">
                <div class="ItemIcon">
                    标题
                </div>
            </div>
        </div>
    </div>
    <!--正文-->
    <div class="TabListItem" style="display: none">
        <div class="ListItem">
            <div class="ListItem1">
                <div class="ItemIcon">
                    正文
                </div>
            </div>
        </div>
    </div>
    <!--背景-->
    <div class="TabListItem" style="display: none">
        <div class="ListItem">
            <div class="ListItem1">
                <div class="ItemIcon">
                    背景
                </div>
            </div>
        </div>
    </div>
    <!--分割线-->
    <div class="TabListItem" style="display: none">
        <div class="ListItem">
            <div class="ListItem1">
                <div class="ItemIcon">
                    分割线
                </div>
            </div>
        </div>
    </div>
    <!--小符号-->
    <div class="TabListItem" style="display: none">
        <div class="ListItem">
            <div class="ListItem1">
                <div class="ItemIcon">
                    小符号
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(".ListItem").click(function(){
                //如果已经被选中
                if($(this).find(".ItemIcon").hasClass("SelectedItem")){
                    $(this).find(".ItemIcon").removeClass("SelectedItem");
                    $(this).find(".ItemIcon").css("border","1px solid #efeff4");
                }
                //如果没被选中
                else{
                    $(".ListItem").eq($(this).index()).find(".ItemIcon").css("border","1px solid #f43530");
                    $(".ListItem").eq($(this).index()).find(".ItemIcon").addClass("SelectedItem");
                }
        });
        /*Tab选项卡*/
        $(".TabList li").click(function(){
            $(".TabList li").eq($(this).index()).addClass("selected").siblings().removeClass('selected');
           $(".TabListItem").hide().eq($(this).index()).show();
        });
    });
</script>
</body>
</html>

单选功能

 $(".ListItem").find(".ItemIcon").removeClass("SelectedItem");
            $(".ListItem").eq($(this).index()).find(".ItemIcon").addClass("SelectedItem");


CSS


body{
    margin:0px auto;
    background:#efeff4;
    position:relative;
    display:block;
    padding:44px 0px 64px 0px;
    height: 100%;
}
/* 头部样式 */
.Top .BtnInsert{
    height:44px;
    float:right;
    padding-right:10px;
    font-size:16px;
    color:#228924;
    line-height:44px;
}
.Top .BtnCancel{
    height:44px;
    line-height:44px;
    float:left;
    padding-left:10px;
    background-size:12px 20px;
    color:#d6d6d7;
    font-size:16px;
}
.wxPictureVersionModule{
    width: 100%;
}
/*Tab选项卡*/
.wxPictureVersionModule .TabListContent{
    width: 72px;
    position: fixed;
    bottom: 0px;
    top: 44px;
    left: 0px;
    overflow:auto;
    overflow-x:hidden;
}
.wxPictureVersionModule .TabList{
    width:68px;
    height:100%;
    background-color:#ffffff;
    font-size: 16px;
    line-height: 44px;
    border-right:1px solid #d9d9d9;
}
.wxPictureVersionModule .TabList .selected{
  border-left:2px solid #f43530;
  background-color:#efeff4;
    border-right:none;
    color: #f43530;
}

.wxPictureVersionModule .TabList .selected a{
    color: #f43530;
}

.wxPictureVersionModule .TabList li{
    width:67px;
    height:44px;
    border:1px solid #d9d9d9;
    background-color:#ffffff;
    border-top: none;

}

.wxPictureVersionModule .TabList h3{
    padding-left: 10px;
    font-size: 16px;
}

.Liend {
    border-bottom:1px solid #efeff4;
}

/*图文1-1*/
.TabListItem{
   overflow: hidden;
    zoom: 1;
}
.TabListItem .ListItem1{
    margin-top: 10px;
    margin-left: 82px;
    margin-right: 10px;
}


.TabListItem .ListItem1 .ItemIcon{
    border: 1px solid #efeff4;
    position: relative;
}

.TabListItem .ListItem1 .ItemIcon img{
    width: 100%;
    height: auto;
    vertical-align: middle;
}




.TabListItem .SelectedItem{
    border: 1px solid #f43530;

}

.TabListItem .ListItem1 .SelectedItem:after{
    content: "";
    width: 22px;
    height: 22px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: url("../images/Mobile_bg0303.png") right bottom no-repeat;
    background-size: 22px 22px;
    width: 100%;
}

@media(min-width:600px){
    .TabListItem .ListItem1 .ItemIcon{
        width:275px;
        margin: 0 auto;
        position: relative;
    }

    .TabListItem .SelectedItem{
        border: 1px solid #f43530;
    }
    .TabListItem .ListItem1 .SelectedItem:after{
        content: "";
        width: 22px;
        height: 22px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        background: url("../images/Mobile_bg0303.png") right bottom no-repeat;
        background-size: 22px 22px;
        width: 100%;
    }
}

/*图文1-2*/

.TabListItem .ListItem1-2{
    margin-top: 10px;
    margin-left: 82px;
    margin-right: 10px;
}


.TabListItem .ListItem1-2 .ItemIcon{
    border: 1px solid #efeff4;
    position: relative;

}

.TabListItem .ListItem1-2 .ItemIcon img{
    width: 100%;
    height:auto;
    vertical-align: middle;
}


.TabListItem .SelectedItem{
    border: 1px solid #f43530;

}

.TabListItem .ListItem1-2 .SelectedItem:after{
    content: "";
    width: 22px;
    height: 22px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: url("../images/Mobile_bg0303.png") right bottom no-repeat;
    background-size: 22px 22px;
    width: 100%;
}

@media(min-width:600px){
    .TabListItem .ListItem1-2 .ItemIcon{
        width:275px;
        margin: 0 auto;
        position: relative;
    }

    .TabListItem .SelectedItem{
        border: 1px solid #f43530;
    }
    .TabListItem .ListItem1-2 .SelectedItem:after{
        content: "";
        width: 22px;
        height: 22px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        background: url("../images/Mobile_bg0303.png") right bottom no-repeat;
        background-size: 22px 22px;
        width: 100%;
    }
}


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页