1. <ul id="0c1fb"></ul>

      <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
      <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>

      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

      RELATEED CONSULTING
      相關(guān)咨詢
      選擇下列產(chǎn)品馬上在線溝通
      服務(wù)時間:8:30-17:00
      你可能遇到了下面的問題
      關(guān)閉右側(cè)工具欄

      新聞中心

      這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
      html實現(xiàn)tab頁面切換的方法

      小編給大家分享一下html實現(xiàn)tab頁面切換的方法,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!

      成都創(chuàng)新互聯(lián)制作網(wǎng)站網(wǎng)頁找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁設(shè)計,成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè),網(wǎng)站設(shè)計,企業(yè)網(wǎng)站搭建,網(wǎng)站開發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為成百上千服務(wù),成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣服務(wù)!

      html實現(xiàn)tab頁面切換的方法:首先創(chuàng)建一個類名為wrap的div當(dāng)作容器;然后創(chuàng)建四個label標(biāo)簽,在每一個label中創(chuàng)建一個span標(biāo)簽;最后創(chuàng)建一個div作為這個導(dǎo)航項。

      html實現(xiàn)tab頁面切換的方法:

      原理:通過label標(biāo)簽的關(guān)聯(lián)屬性和input的單選類型實現(xiàn)相應(yīng)div的顯示

      1、創(chuàng)建一個類名為wrap的div當(dāng)作容器

      2、創(chuàng)建四個label標(biāo)簽,這將作為tab切換項

      3、在每一個label中創(chuàng)建一個span標(biāo)簽(導(dǎo)航內(nèi)容),input標(biāo)簽(實現(xiàn)選中于取消選中)type類型為radio,還要創(chuàng)建一個div作為這個導(dǎo)航項被點(diǎn)中是顯示內(nèi)容框,

      這里要注意的是input標(biāo)簽的name必須是相同的,我這邊取名叫tab

      最終HTML為下面這樣:

      
          
          
          
          
      

      重要的css,通過將input的width設(shè)為0使得input的那個小圓點(diǎn)不現(xiàn)實,又通過label的關(guān)聯(lián)用導(dǎo)航項的點(diǎn)擊實現(xiàn)input的checked,然后通過input:checked+div{display:block}實現(xiàn)相應(yīng)div的顯示

      
              *{margin: 0;padding: 0;}
              .wrap{
                  margin: 20px auto;
                  width: 403px;
                  height: 600px;
                  border:1px solid brown;
                  position: relative;
              }
              label{
                  width: 100px;
                  height: 30px;
                  float: left;
                  text-align: center;
                  line-height:30px;
                  border-right: 1px solid brown;
                  border-bottom: 1px solid brown;
              }
              label:nth-of-type(4){
                  border-right: none;
              }
              label span{
                  cursor: pointer;
              }
              label div{
                  width: 403px;
                  height: 568px;
                  position: absolute;
                  left: 0;
                  top: 31px;
                  background: #eeeeee;
                  display: none;
              }
              label input{
                  width: 0;
              }
              input:checked+div{
                  display: block;
              }
          

      看完了這篇文章,相信你對“html實現(xiàn)tab頁面切換的方法”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!


      分享題目:html實現(xiàn)tab頁面切換的方法
      路徑分享:http://www.ef60e0e.cn/article/psscji.html
      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区
      1. <ul id="0c1fb"></ul>

        <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
        <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>

        沙洋县| 和田县| 临城县| 湄潭县| 柯坪县| 万全县| 进贤县| 石柱| 东乡县| 西贡区| 全州县| 永平县| 大关县| 罗田县| 阜新市| 肥西县| 临泽县| 云南省| 长垣县| 社旗县| 井研县| 壤塘县| 新竹市| 聊城市| 克拉玛依市| 东海县| 南投市| 南通市| 礼泉县| 阳泉市| 微山县| 同德县| 苗栗市| 石柱| 五大连池市| 文化| 历史| 龙井市| 汽车| 长岭县| 临江市|