整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          點(diǎn)擊導(dǎo)航欄按鈕切換按鈕背景色

          決點(diǎn)擊導(dǎo)航欄點(diǎn)擊哪個(gè),哪個(gè)就高亮變色,其他恢復(fù)原狀。

          這里我用的是vue框架和element ui組件庫(kù)寫的。主要就是一個(gè)點(diǎn)擊事件和一個(gè)for循環(huán)。

          HTML

            <div id="app">
              <!-- 導(dǎo)航欄 -->
              <div id="nav">
                <router-link 
          	      @click.native="dianji(index)" 
          	      :class="{ clk: index == dynamic }"
          	      v-for="(item, index) in navArr" 
          	      :key="index" 
          	      :to="item.path">
          	      {{ item.content }}
                </router-link>
              </div>
              <router-view />
            </div>
          

          @click.native和@click差不多,但是router-link會(huì)阻止click事件,所有加一個(gè)native就可以了。

          JS

          <script>
          export default {
            name: "app",
            data() {
              return {
                // 導(dǎo)航按鈕數(shù)組
                navArr: [
                  { path: "/one", content: "第一個(gè)按鈕" },
                  { path: "/two", content: "第二個(gè)按鈕" },
                  { path: "/three", content: "第三個(gè)按鈕" },
                  { path: "/four", content: "第四個(gè)按鈕" },
                ],
                dynamic:0, //默認(rèn)第一個(gè)
              };
            },
            methods: {
              // 點(diǎn)擊切換導(dǎo)航欄背景色
              dianji: function (index) {
                this.dynamic = index;
              },
            },
          };
          </script>
          

          css這里我就不寫了,就幾行代碼。

          效果圖



          沒(méi)了,結(jié)束了,是不是很簡(jiǎn)單吶,如有問(wèn)題,歡迎留言。
          如果此篇博文對(duì)您有幫助,還請(qǐng)動(dòng)動(dòng)小手點(diǎn)贊 收藏 ?留言 吶~,謝謝 ~ ~

          、跳出新頁(yè)面:

          <basetarget=”_blank”>target="_self"不跳轉(zhuǎn)

          <form action="xxx.htm" target="_blank">form表單提交的跳轉(zhuǎn)設(shè)置

          2、點(diǎn)擊按鈕跳出別的頁(yè)面添加

          <a href="#" onclick="openZoosUrl();return false;">

          onclick="return false"

          3、display:block;塊級(jí)元素,也就是說(shuō)它可以設(shè)置一些寬高,獨(dú)占一行,比如,div元素,p元素等display:inline-block,行級(jí)元素,也就說(shuō)它可以使得同樣設(shè)置成行級(jí)元素的元素一起在一行,然后可以設(shè)置寬高,這個(gè)適應(yīng)于制作一個(gè)導(dǎo)航菜單,將每個(gè)菜單項(xiàng)設(shè)置成行級(jí)元素。它的寬和高默認(rèn)是內(nèi)容的寬和高,典型的元素是表單類的元素。dispaly:inline.行級(jí)元素,不可設(shè)置寬和高,默認(rèn)寬高是內(nèi)容的寬和高,典型的比如,span,

          4、html鼠標(biāo)小手:

          cursor:pointer;

          5、html背景圖屬性:

          background-size:100%;,但是你的圖片寬度,高度要設(shè)置成100% ,要注意的是.php的文件里面這個(gè)background-image:url();不好用,失效,你要使用網(wǎng)站的絕對(duì)路徑background:url('/20151106/404/image/404.png') no-repeat 4px 5px;}background:url("11111.jpg");background-repeat:no-repeat;background-size:100%;width:100%;height:100%;

          這個(gè)是給頁(yè)面加背景的body{padding: 0px;margin: 0px;background-color:#494949;width:100%;height:100%;}.

          還有在設(shè)置背景圖片的時(shí)候可以使用背景background-image:url("");這個(gè)屬性來(lái)設(shè)置背景,但是圖片要用gif的格式

          6、按輸出方式來(lái)顯示文本格式:<pre></pre>橫線:<hr /><q></q>雙引號(hào)標(biāo)簽下劃線<ins></ins>

          7、html---position/relative/absolute/fixed/三種布局定位方式的總結(jié)relative是按照自身來(lái)說(shuō),absolute是按照瀏覽器來(lái)說(shuō),但是要注意的是,如果他有父級(jí)元素的話,那么他就是依照父級(jí)元素來(lái)進(jìn)行改變位置的。

          8、無(wú)序列表去掉前面黑點(diǎn)li{list-style:none;}

          9、隱藏元素 - display:none或visibility:hidden

          display-這個(gè)元素,設(shè)置之后原本的元素不會(huì)占用當(dāng)前的空間,不會(huì)影響布局,但是后者,隱藏之后還會(huì)占用空間

          10、HTML隱藏多余

          Div{overflow:hidden}

          10、隱藏自適應(yīng):overflow:auto;

          11、關(guān)于框架的問(wèn)題

          這個(gè)是接受你要顯示頁(yè)面

          indx.php是框架顯示的頁(yè)面,最上面,也就是沒(méi)按鍵顯示

          <iframe src="index.php" style="width:100%;height:100%;border:none " name="main"></iframe>

          這個(gè)是你點(diǎn)擊之后想在哪顯示后面加:target=""

          <a href='../admin/shopclass/add.php' target="main">添加分類</a>

          12、關(guān)于背景的高的問(wèn)題,也就是說(shuō)你定義了一個(gè)div但是沒(méi)有搞,是為了讓你的圖片在上面。那么就有這個(gè)屬性了

          overflow:hidden;

          也就是你本身是屬于父級(jí)元素的,但是你float就脫離了文本,變成浮動(dòng)的,所有就不會(huì)在用父子元素的空間,所以就父級(jí)加上這個(gè)overflow:hidden;

          13、錨點(diǎn)的設(shè)置

          在你想跳轉(zhuǎn)的頁(yè)面的地方加上:<a name="miao">

          然后在你想加鏈接的地方加上<a href="#miao">去找錨點(diǎn)</a>

          14.點(diǎn)擊換驗(yàn)證碼圖片

          <img src="../public/common/yzm.php" alt="" style="cursor:pointer" onclick="this.src='../public/common/yzm.php?rand='+Math.random()">

          15、圓角

          border-radius:5px;

          16、textarea的左側(cè)文字在最左邊

          style="vertical-align:top"



          17、html塊狀元素和內(nèi)聯(lián)元素的總結(jié),塊狀元素可以設(shè)置margin,但是使用margin的時(shí)候要符合:1.塊狀元素,2.有寬高,其中內(nèi)聯(lián)元素不能設(shè)置margin和寬高的屬性,只能設(shè)置padding

          TML 使用超級(jí)鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。

          幾乎可以在所有的網(wǎng)頁(yè)中找到鏈接。點(diǎn)擊鏈接可以從一張頁(yè)面跳轉(zhuǎn)到另一張頁(yè)面。

          實(shí)例

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <p>

          <a href="/index.html">本文本</a> 是一個(gè)指向本網(wǎng)站中的一個(gè)頁(yè)面的鏈接。</p>

          <p><a >本文本</a> 是一個(gè)指向萬(wàn)維網(wǎng)上的頁(yè)面的鏈接。</p>

          </body>

          </html>

          [/demo]

          本例演示如何在 HTML 文檔中創(chuàng)建鏈接。

          將圖像作為鏈接

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <p>

          您也可以使用圖像來(lái)作鏈接:

          <a href="/example/html/lastpage.html">

          <img border="0" src="./imagecopy1234567890/test.gif" />

          </a>

          </p>

          </body>

          </html>

          [/demo]

          本例演示如何使用圖像作為鏈接。

          (可以在本頁(yè)底端找到更多實(shí)例)

          HTML 超鏈接(鏈接)

          超鏈接可以是一個(gè)字,一個(gè)詞,或者一組詞,也可以是一幅圖像,您可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。

          當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)中的某個(gè)鏈接上時(shí),箭頭會(huì)變?yōu)橐恢恍∈帧?/p>

          我們通過(guò)使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接。

          有兩種使用 <a> 標(biāo)簽的方式:

          通過(guò)使用 href 屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接

          通過(guò)使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽

          什么是超文本?

          標(biāo)記語(yǔ)言的真正威力在于其收集能力,它可以將收集來(lái)的文檔組合成一個(gè)完整的信息庫(kù),并且可以將文檔庫(kù)與世界上的其他文檔集合鏈接起來(lái)。

          這樣的話,讀者不僅可以完全控制文檔在屏幕上的顯示,還可以通過(guò)超鏈接來(lái)控制瀏覽信息的順序。這就是 HTML 和 XHTML 中的 “HT” - 超文本(hypertext),就是它將整個(gè) Web 網(wǎng)絡(luò)連接起來(lái)。

          超文本的基礎(chǔ)知識(shí)

          超文本的基本特征就是可以超鏈接文檔;你可以指向其他位置,該位置可以在當(dāng)前的文檔中、局域網(wǎng)中的其他文檔,也可以在因特網(wǎng)上的任何位置的文檔中。這些文檔組成了一個(gè)雜亂的信息網(wǎng)。目標(biāo)文檔通常與其來(lái)源有某些關(guān)聯(lián),并且豐富了來(lái)源;來(lái)源中的鏈接元素則將這種關(guān)系傳遞給瀏覽者。

          超鏈接可以用于各種效果。超鏈接可以用在目錄和主題列表中。瀏覽者可以在瀏覽器屏幕上單擊鼠標(biāo)或在鍵盤上按下按鍵,從而選擇并自動(dòng)跳轉(zhuǎn)到文檔中自己感興趣的那個(gè)主題,或跳轉(zhuǎn)到世界上某處完全不同的集合中的某個(gè)文檔。

          超鏈接還可以向?yàn)g覽者指出有關(guān)文檔中某個(gè)主題的更多信息。例如,“如果您想了解更詳細(xì)的信息,請(qǐng)參閱某某頁(yè)面。”。作者可以使用超鏈接來(lái)減少重復(fù)信息。例如,我們建議創(chuàng)作者在每個(gè)文檔中都簽署上自己的姓名。這樣就可以使用一個(gè)將名字和另一個(gè)包含地址、電話號(hào)碼等信息的單獨(dú)文檔鏈接起來(lái)的超鏈接,而不必在每個(gè)文檔中都包含完整的聯(lián)系信息。

          超鏈接(hyper text),或者按照標(biāo)準(zhǔn)叫法稱為錨(anchor),是使用 <a> 標(biāo)簽標(biāo)記的,可以用兩種方式表示。錨的一種類型是在文檔中創(chuàng)建一個(gè)熱點(diǎn),當(dāng)用戶激活或選中(通常是使用鼠標(biāo))這個(gè)熱點(diǎn)時(shí),會(huì)導(dǎo)致瀏覽器進(jìn)行鏈接。瀏覽器會(huì)自動(dòng)加載并顯示同一文檔或其他文檔中的某個(gè)部分,或觸發(fā)某些與因特網(wǎng)服務(wù)相關(guān)的操作,例如發(fā)送電子郵件或下載特殊文件等。錨的另一種類型會(huì)在文檔中創(chuàng)建一個(gè)標(biāo)記,該標(biāo)記可以被超鏈接引用。

          還有一些與超鏈接相關(guān)聯(lián)的鼠標(biāo)相關(guān)事件。這些事件與 JavaScript 結(jié)合使用可以產(chǎn)生一些令人激動(dòng)的效果。

          注釋

          錨的這兩種類型都使用同樣的標(biāo)簽;也許這就是它們擁有同樣的名稱的原因。但是我們發(fā)現(xiàn),如果將它們區(qū)分開(kāi),把提供熱點(diǎn)和超鏈接地址的錨看作“鏈接”,而用于標(biāo)記文檔的目標(biāo)部分的錨稱為“錨”,那么您將更容易理解這兩種類型的錨。

          HTML 鏈接語(yǔ)法

          鏈接的 HTML 代碼很簡(jiǎn)單。它類似這樣:

          <a href="url">Link text</a>

          href 屬性規(guī)定鏈接的目標(biāo)。

          開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來(lái)顯示。

          實(shí)例

          <a >Visit W3School</a>

          上面這行代碼顯示為:Visit W3School

          點(diǎn)擊這個(gè)超鏈接會(huì)把用戶帶到 W3School 的首頁(yè)。

          提示:"鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

          HTML 鏈接 - target 屬性

          使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示。

          下面的這行會(huì)在新窗口打開(kāi)文檔:

          <a target="_blank">Visit W3School!</a>

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <a target="_blank">Visit W3School!</a>

          <p>如果把鏈接的 target 屬性設(shè)置為 "_blank",該鏈接會(huì)在新窗口中打開(kāi)。</p>

          </body>

          </html>

          [/demo]

          HTML 鏈接 - name 屬性

          name 屬性規(guī)定錨(anchor)的名稱。

          您可以使用 name 屬性創(chuàng)建 HTML 頁(yè)面中的書簽。

          書簽不會(huì)以任何特殊方式顯示,它對(duì)讀者是不可見(jiàn)的。

          當(dāng)使用命名錨(named anchors)時(shí),我們可以創(chuàng)建直接跳至該命名錨(比如頁(yè)面中某個(gè)小節(jié))的鏈接,這樣使用者就無(wú)需不停地滾動(dòng)頁(yè)面來(lái)尋找他們需要的信息了。

          命名錨的語(yǔ)法:

          <a name="label">錨(顯示在頁(yè)面上的文本)</a>

          提示:錨的名稱可以是任何你喜歡的名字。

          提示:您可以使用 id 屬性來(lái)替代 name 屬性,命名錨同樣有效。

          實(shí)例

          首先,我們?cè)?HTML 文檔中對(duì)錨進(jìn)行命名(創(chuàng)建一個(gè)書簽):

          <a name="tips">基本的注意事項(xiàng) - 有用的提示</a>

          然后,我們?cè)谕粋€(gè)文檔中創(chuàng)建指向該錨的鏈接:

          <a href="#tips">有用的提示</a>

          您也可以在其他頁(yè)面中創(chuàng)建指向該錨的鏈接:

          <a >有用的提示</a>

          在上面的代碼中,我們將 # 符號(hào)和錨名稱添加到 URL 的末端,就可以直接鏈接到 tips 這個(gè)命名錨了。

          基本的注意事項(xiàng) - 有用的提示:

          注釋:請(qǐng)始終將正斜杠添加到子文件夾。假如這樣書寫鏈接:,就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址,然后創(chuàng)建一個(gè)新的請(qǐng)求,就像這樣:。

          提示:命名錨經(jīng)常用于在大型文檔開(kāi)始位置上創(chuàng)建目錄。可以為每個(gè)章節(jié)賦予一個(gè)命名錨,然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經(jīng)常訪問(wèn)百度百科,您會(huì)發(fā)現(xiàn)其中幾乎每個(gè)詞條都采用這樣的導(dǎo)航方式。

          提示:假如瀏覽器找不到已定義的命名錨,那么就會(huì)定位到文檔的頂端。不會(huì)有錯(cuò)誤發(fā)生。

          更多實(shí)例

          在新的瀏覽器窗口打開(kāi)鏈接

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <a target="_blank">Visit W3School!</a>

          <p>如果把鏈接的 target 屬性設(shè)置為 "_blank",該鏈接會(huì)在新窗口中打開(kāi)。</p>

          </body>

          </html>

          [/demo]

          本例演示如何在新窗口打開(kāi)一個(gè)頁(yè)面,這樣的話訪問(wèn)者就無(wú)需離開(kāi)你的站點(diǎn)了。

          鏈接到同一個(gè)頁(yè)面的不同位置

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <p>

          <a href="#C4">查看 Chapter 4。</a>

          </p>

          <h2>Chapter 1</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 2</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 3</h2>

          <p>This chapter explains ba bla bla</p>

          <h2><a name="C4">Chapter 4</a></h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 5</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 6</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 7</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 8</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 9</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 10</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 11</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 12</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 13</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 14</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 15</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 16</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 17</h2>

          <p>This chapter explains ba bla bla</p>

          </body>

          </html>

          [/demo]

          本例演示如何使用鏈接跳轉(zhuǎn)至文檔的另一個(gè)部分

          跳出框架

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <p>被鎖在框架中了嗎?</p>

          <a href="/index.html"

          target="_top">請(qǐng)點(diǎn)擊這里!</a>

          </body>

          </html>

          [/demo]

          本例演示如何跳出框架,假如你的頁(yè)面被固定在框架之內(nèi)。

          創(chuàng)建電子郵件鏈接

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <p>

          這是郵件鏈接:

          <a href="mailto:someone@microsoft.com?subject=Hello%20again">發(fā)送郵件</a>

          </p>

          <p>

          <b>注意:</b>應(yīng)該使用 %20 來(lái)替換單詞之間的空格,這樣瀏覽器就可以正確地顯示文本了。

          </p>

          </body>

          </html>

          [/demo]

          本例演示如何鏈接到一個(gè)郵件。(本例在安裝郵件客戶端程序后才能工作。)

          創(chuàng)建電子郵件鏈接 2

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <p>

          這是另一個(gè) mailto 鏈接:

          <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">發(fā)送郵件!</a>

          </p>

          <p>

          <b>注意:</b>應(yīng)該使用 %20 來(lái)替換單詞之間的空格,這樣瀏覽器就可以正確地顯示文本了。

          </p>

          </body>

          </html>

          [/demo]

          本例演示更加復(fù)雜的郵件鏈接。

          HTML 鏈接標(biāo)簽

          標(biāo)簽 描述

          <a> 定義錨。


          主站蜘蛛池模板: 国产乱子伦一区二区三区| 国产探花在线精品一区二区| 精品一区精品二区| 中文字幕一区在线| 国产91精品一区二区麻豆网站| 国产一区在线观看免费| 午夜天堂一区人妻| 八戒久久精品一区二区三区| 久久久国产精品亚洲一区| 亚洲日韩国产欧美一区二区三区| 国产成人一区二区三区在线观看| 国产SUV精品一区二区四 | 亚洲男女一区二区三区| 天堂Aⅴ无码一区二区三区| 国产SUV精品一区二区88| 国产韩国精品一区二区三区久久| 亚洲一区爱区精品无码| 精品人妻少妇一区二区| 能在线观看的一区二区三区| 国产精品区一区二区三| 亚洲一区二区三区久久久久| 国产亚洲一区二区手机在线观看| 三上悠亚国产精品一区| 亲子乱av一区二区三区| 果冻传媒董小宛一区二区| 红桃AV一区二区三区在线无码AV| 99久久精品费精品国产一区二区| 国产成人精品一区二区三区| 亚洲一区二区三区在线观看精品中文| 中文字幕在线一区二区三区| 精品一区二区三区四区| 国产精品分类视频分类一区| 国产精品视频一区| 国产精品成人国产乱一区| 国产日韩一区二区三区在线观看| 无码精品人妻一区二区三区中| 久久蜜桃精品一区二区三区| 中文字幕一区在线播放| 亚洲av综合av一区二区三区| 一区二区三区影院| 日韩免费一区二区三区|