Question

我正在更新现有网站并随时学习。以下代码适用于我想要更新的2,2状态按钮。在视觉上它们是相同的，但每个的代码完全不同，我想知道是否有人可以帮助我理解为什么？

<ul class="clearfix">

                {if $smarty.session.userTypeCount > 1}

                    {assign var="switchActivCls" value=""}

                    {if $currentfilename eq "profileSwitch.php"}

                        {assign var="switchActivCls" value="active"}

                    {/if}

                    <li class="proSwitch">

                        <a href="{$pubmenu.profileSwitch}" class="{$switchActivCls}"><span class="link-underline">Switch Profile</span></a>                     

                    </li>

                {else}

                    <li>&nbsp;</li>

                    <li>&nbsp;</li>

                {/if}                   

                    <div id="logOut" class="logOut">

                        <li><a href="{$pubmenu.logout}"><img src="{$image_path}icons/exit.svg" width="18" height="18" alt="Logout" /></a></li>

                        <li><a href="{$pubmenu.logout}"><span class="link-underline">Logout</span></a></li>

                    </div>

                    <div id="logOut1" class="logOut" style="display:none">

                        <li><a href="{$pubmenu.logout}"><img src="{$image_path}icons/exit-ovr.svg" width="18" height="18" alt="Logout"/></a></li>

                        <li><a href="{$pubmenu.logout}"><span class="link-underline">Logout</span></a></li>

                    </div>



            </ul>

第一个就像我期望的那样，虽然我不知道为什么在else语句中有li和空格。使用现有的类变量隐藏/显示内容不是更好吗，而不是在页面上留下空白？

第二个似乎更不寻常; 2个div，4个li，4个标签，几个图像和一些硬编码到逻辑中的样式，对于单个按钮来说似乎很奇怪，它与上面的按钮基本相同。我可以看到代码拉入了href和图像路径，但似乎并没有做任何特别的事情，所以我想知道为什么额外的努力/代码？有没有人知道为什么这些按钮会以这种方式编码 - 最佳实践，浏览器支持或其他什么？

理想情况下，我想更新两个按钮以使用这样的内容：

<a class="icon-link" href="{$pubmenu.logout}"><svg class="fa-icon" role="image" alt="logout" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fa-icon"></use></svg>Name</a>

上面是icomoon和Chris Coyier使用的方法，所以它应该很好，似乎在我的网站上的其他地方工作（仅在本地测试）。但如果您有任何其他建议，请随时告诉我 - 每天都是上学日：）

非常感谢。

简单的2状态按钮似乎比它需要的更复杂 - 或者我错过了什么？

0 个答案: