导航点击选中效果重构_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

导航点击选中效果重构_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:23 AM

一、场景

最近做重构，有一个功能是，鼠标点击链接后显示不同样式：

代码如下，样式布局我修改后如下，使用bootstrap框架来做。

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="utf-8" />    <link href="css/bootstrap.min.css" rel="stylesheet">    <title>starof test</title>    <style type="text/css">.menu{border-radius:4px;background-color:#f8f8f8;padding:10px;margin-top:30px;}.menu p{font-size:26px;margin-bottom:25px;color:#76caea;padding-left:30px;margin-top:15px;}.menu .nav-pills > li > a:hover{background-color:#8fd4e6;}/*page1.html页面定义*/.menu01{background-color:#5dc1d1;border-radius:4px;}/*page2.html页面定义*//*.menu02{background-color:#5dc1d1;border-radius:4px;}*//*page3.html页面定义*//*.menu03{background-color:#5dc1d1;border-radius:4px;}*/    </style></head><body><div class="col-md-2 menu">    <p>        <span class="glyphicon glyphicon-user"></span>  <span>starof</span>    </p>    <ul class="nav nav-pills nav-stacked">        <li class="menu01"><a href="page1.html">page1</a></li>        <li class="menu02"><a href="page2.html">page2</a></li>        <li class="menu03"><a href="page3.html">page3</a></li>    </ul></div></body></html>

现在重点说一下：功能实现。

原来代码是这样实现链接点击样式的，给每个链接不同的class，

<li class="menu01"><a href="page1.html">page1</a></li><li class="menu02"><a href="page2.html">page2</a></li><li class="menu03"><a href="page3.html">page3</a></li>

然后在page1.html页面定义：

.menu01{background-color:#5dc1d1;border-radius:4px;}

同理在page2.html页面定义：

.menu02{background-color:#5dc1d1;border-radius:4px;}

在page3.html页面定义：

.menu03{background-color:#5dc1d1;border-radius:4px;}

menu菜单这个模块是page1.html，page2.html，page3.html三个页面公共模块，通过include来共享。这样在调用不同页面时，其他链接的样式不生效。所以可以实现被点击的链接显示不同样式的效果。

但是这样的做法是非常糟糕的。同一个样式有多少个页面就重写多少次，不同class名称对应的却是同样的样式。

这样的代码我是无法忍受的。下面用一小段js来实现同样功能。

二、用js重构

代码如下：

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="utf-8" />    <link href="css/bootstrap.min.css" rel="stylesheet">    <title>starof test</title>    <style type="text/css">.menu{border-radius:4px;background-color:#f8f8f8;padding:10px;margin-top:30px;}.menu p{font-size:26px;margin-bottom:25px;color:#76caea;padding-left:30px;margin-top:15px;}/*下面这样写是为了提高选择器的优先级*/.menu .nav-pills > li > a:hover{background-color:#8fd4e6;}.clickstyle{background-color:#5dc1d1;border-radius:4px;}    </style></head><body><div class="col-md-2 menu">    <p>        <span class="glyphicon glyphicon-user"></span>  <span>starof</span>    </p>    <ul class="nav nav-pills nav-stacked">        <li><a href="#">page1</a></li>        <li><a href="#">page2</a></li>        <li><a href="#">page3</a></li>    </ul></div><script type="text/javascript">    var oLis=document.getElementsByTagName("li");    var i,j;    var length=oLis.length;    for(i=0;i<length;i++){        oLis[i].onclick=function(){            for(j=0;j<length;j++){                oLis[j].className="";            }            this.className+="clickstyle";        }    }</script></body></html>

三、类似的效果

实现方式如下：通过判断用户请求的url和是哪个，就给哪个添加active样式。

    <div class="btn-toolbar">        <div class="btn-group">            {% url "addpermissionurl" as theaddpermissionurl %}            <a class="btn btn-default {%if request.path = theaddpermissionurl%} active {%endif%}" href={{ theaddpermissionurl }}><span class="glyphicon glyphicon-edit"></span>新建权限</a>            {% url "listpermissionurl" as thelistpermissionurl %}            <a class="btn btn-default {%if request.path = thelistpermissionurl%} active {%endif%}" href={{ thelistpermissionurl }}><span class="glyphicon glyphicon-list"></span>权限列表</a>        </div>    </div>

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

＆gt; gt;的目的是什麼元素？Mar 21, 2025 pm 12:34 PM

本文討論了HTML＆lt; Progress＆gt;元素，其目的，樣式和與＆lt; meter＆gt;元素。主要重點是使用＆lt; progress＆gt;為了完成任務和LT;儀表＆gt;對於stati

＆lt; datalist＆gt;的目的是什麼。元素？Mar 21, 2025 pm 12:33 PM

本文討論了html＆lt; datalist＆gt;元素，通過提供自動完整建議，改善用戶體驗並減少錯誤來增強表格。Character計數：159

＆lt; meter＆gt;的目的是什麼。元素？Mar 21, 2025 pm 12:35 PM

本文討論了HTML＆lt; meter＆gt;元素，用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了＆lt; meter＆gt;從＆lt; progress＆gt;和前

視口元標籤是什麼？為什麼對響應式設計很重要？Mar 20, 2025 pm 05:56 PM

本文討論了視口元標籤，這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互，而濫用可能會導致設計和可訪問性問題。

HTML5中跨瀏覽器兼容性的最佳實踐是什麼？Mar 17, 2025 pm 12:20 PM

文章討論了確保HTML5跨瀏覽器兼容性的最佳實踐，重點是特徵檢測，進行性增強和測試方法。

我如何使用html5＆lt; time＆gt; 元素以語義表示日期和時間？Mar 12, 2025 pm 04:05 PM

本文解釋了HTML5＆lt; time＆gt;語義日期/時間表示的元素。它強調了DateTime屬性對機器可讀性（ISO 8601格式）的重要性，並在人類可讀文本旁邊，增強Accessibilit

如何使用HTML5表單驗證屬性來驗證用戶輸入？Mar 17, 2025 pm 12:27 PM

本文討論了使用HTML5表單驗證屬性，例如必需的，圖案，最小，最大和長度限制，以直接在瀏覽器中驗證用戶輸入。

＆lt; iframe＆gt;的目的是什麼。標籤？使用時的安全考慮是什麼？Mar 20, 2025 pm 06:05 PM

本文討論了＆lt; iframe＆gt;將外部內容嵌入網頁，其常見用途，安全風險以及諸如對象標籤和API等替代方案的目的。

See all articles

熱AI工具

熱工具

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中