其中涉及到几个知识点:
function show13() {
$("#table11").hide();
$("#table12").hide();
$("#table13").toggle();
}
这个是对应display:none的
show()显示
hide()隐藏
toggle()显示/隐藏
多样变种
https://blog.csdn.net/skh2015java/article/details/52790121
这个是底部固定
<div id="dg" style="z-index: 9999; width:100%; position: fixed ! important; right: 0px; bottom: 0px;">
多样变种:
html固定浮动在底部div的实现效果
https://blog.csdn.net/ligaogang/article/details/41441297
div页面底部悬浮显示
https://blog.csdn.net/sinat_29774479/article/details/78337467
这个是td当中居中,上下空白,背景图片(拉伸)等内容。
<td style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
这一部分是table的部分属性,由于框架中已经定义了部分属性,所以在此进行强调,其中有用的是背景颜色。
<table width="100%" style=" width:100%; right: 0px; bottom: 0px;border:3px; border-color: #000;background: #EEE;">
所有代码:
<div id="dg" style="z-index: 9999; width:100%; position: fixed ! important; right: 0px; bottom: 0px;">
<table width="100%" style=" width:100%; right: 0px; bottom: 0px;">
<!--position: absolute;-->
<tr>
<td style="width:33%;text-align: center;padding:3%;">
  
</td>
<td valign="bottom" style="width:33%;text-align:bottom;padding:0%;">
<table id="table1" width="100%" style="display:none; width:100%;bottom:0px;background: #FFF;">
<tr>
<td onclick="show11();" style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/1.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
法律法规
</td>
</tr>
<tr>
<td onclick="show12();" style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
标准查询
</td>
</tr><tr>
<td onclick="show13();" style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
规章制度
</td>
</tr>
</table>
</td>
<td valign="bottom" style="width:33%;text-align:bottom;padding:0%;">
<table id="table11" width="100%" style="display:none; width:100%;bottom:0px;background: #FFF;">
<tr>
<td style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/1.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
安全
</td>
</tr>
<tr>
<td style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
职业卫生
</td>
</tr>
<tr>
<td style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
其他
</td>
</tr>
</table>
<table id="table12" width="100%" style="display:none; width:100%;bottom:0px;background: #FFF;">
<tr>
<td style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/1.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
集团公司
</td>
</tr>
<tr>
<td style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
油田
</td>
</tr>
<tr>
<td style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
其他
</td>
</tr>
</table>
<table id="table13" width="100%" style="display:none; width:100%;bottom:0px;background: #FFF;">
<tr>
<td style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/1.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
国家
</td>
</tr>
<tr>
<td style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
石油行业
</td>
</tr>
<tr>
<td style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
zsh企业
</td>
</tr>
<tr>
<td style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/4.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
油田企业
</td>
</tr>
<tr>
<td style="text-align:center;vertical-align:middle;padding:10%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
其他
</td>
</tr>
</table>
<!-- <div class="dropdown-divider"></div>-->
</td>
</tr>
</table>
<table width="100%" style=" width:100%; right: 0px; bottom: 0px;border:3px; border-color: #000;background: #EEE;">
<!--position: absolute;-->
<tr>
<td style="text-align:center;vertical-align:middle;padding:3%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
管理手册
</td>
<td style="text-align:center;vertical-align:middle;padding:3%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
<div href="#" onclick="show();">标准制度</div>
</td>
<td style="text-align:center;vertical-align:middle;padding:3%;background-image:url('{$conf_templete}img_plus/2.png');no-repeat; background-size:100% 100%; background-attachment:fixed;">
通用知识
<!-- <div class="dropdown-divider"></div>-->
</td>
</tr>
</table>
</div>
<script >
function show() {
$("#table1").toggle();
$("#table11").hide();
$("#table12").hide();
$("#table13").hide();
// $("#table1").css("background-image","url('{$conf_templete}img_plus/5.png')" );
}
function show11() {
$("#table11").toggle();
$("#table12").hide();
$("#table13").hide();
}
function show12() {
$("#table11").hide();
$("#table12").toggle();
$("#table13").hide();
}
function show13() {
$("#table11").hide();
$("#table12").hide();
$("#table13").toggle();
}
</script>
以上代码可以在手机端完美运行,但是电脑端却不行,360极速模式也不行,显示为背景过分拉伸错位。
手机端那里是有格子的。