使用APICloud从0开始写脉脉(二)底部导航栏.docVIP

两步走：首先分析下底部导航栏具有的特征，然后再考虑如何实现：?具有的特征：1、首先底部导航栏有一个灰色的背景图片。2、四组按钮都由两部分（图标和文字）组成，点选不同按钮会打开不同的“窗口组”。3、按钮未被选中为灰色，选中后换为蓝色图标、文字颜色加深。4、四组按钮水平均匀分布。如何实现：1、背景图片直接用css设置就可以了2、每组按钮都由一个图标和文字组成，我们把这两看成一个整体，用a标签包裹住分别显示图标和文字的标签，当a标签被选中后，触发onclick事件函数处理。3、此步可以和2合并，用js替换图片。脉脉用的是单选按钮和css的配合来实现，它将a标签和单选按钮绑在了一块，当a标签被选中，同时单选按钮被选中。也就是说每个a标签都对应一个单选按钮，a标签和单选按钮各司其职，a标签打开窗口组，单选按钮更新图片。4、使用css3的水平盒子模型，占用比例为1：1：1：1我们先看下如何布局：index.html 1.??div id=footer? ??? 2.? ?? ???form name=Menu? ???//四个按钮的父类，这里为底部导航背景图片 3.? ?? ?? ?? ?? ? input type=radio name=footers id=ifooter_home checked=true /? ? // 第一组按钮 4.? ?? ?? ?? ?? ? a tapmode=homeActive onclick=jumpFrame(home);? ?? ?? ?? ?? ?? ?? ?? ? // 用a标签包裹住里面的图标和文字标签 5.? ?? ?? ?? ?? ?? ?? ?? ?p class=home/p? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?// 图标 6.? ?? ?? ?? ?? ?? ?? ?? ?center id=hic首页/center? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???// 文字 7.? ?? ?? ?? ?? ? /a 8.? ?? ?? ?? ?? ? input type=radio name=footers id=ifooter_jobs /? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?// 第二组按钮 9.? ?? ?? ?? ?? ? a tapmode=jobsActive onclick=jumpFrame(jobs);? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? 10.? ?? ?? ?? ?? ?? ?? ???p class=jobs/p 11.? ?? ?? ?? ?? ?? ?? ???center工作/center 12.? ?? ?? ?? ???/a 13.? ?? ?? ?? ???input type=radio name=footers id=ifooter_contacts /? ?? ?? ?? ?? ?? ?? ?? ???// 第三组按钮 14.? ?? ?? ?? ???a tapmode=contactsActive onclick=jumpFrame(contacts);? ?? ?? ?? ?? ?? ?? ? 15.? ?? ?? ?? ?? ?? ?? ?? ?p class=contacts/p 16.? ?? ?? ?? ?? ?? ?? ?? ?center人脉/center? ?? ??? 17.? ?? ?? ?? ?? ?/a 18.? ?? ?? ?? ?? ?input type=radio name=footers id=ifooter_myself /? ?? ?? ?? ?? ?? ?? ?? ?? ? // 第四组按钮 19.? ?? ?? ?? ?? ?a tapmode=myselfActive onclick=jumpFrame(myself); 20.? ?? ?? ?? ?? ?? ?? ?? ? p class=myself/p 21.? ?? ?? ?? ?? ?? ?? ?? ? center个人/center? ?? ?? ?? ?? ?? 22.? ?? ?? ?? ?? ?/a 23.? ?? ?? ? /form 24.??/div 复制代码 行3：??每组按钮旁边配上个单选按钮，当按钮(a标签)被选中，同时触发该单选按钮，而单选按钮被选中则通过css中的设置更换一