2. 程式人生 > >關於錨點和label的純css內容切換

關於錨點和label的純css內容切換

阿新 • • 發佈：2019-02-09

關於錨點的幾則

錨點跳轉就是根據url跳轉，做的一項定位

一般有兩種方法：
1. a標籤的name屬性
2. id

考慮每次使用a的name有點浪費標籤，所以建議使用id

程式碼塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>錨點</title>
    <style>
        .container{width: 850px;height: 880px;text-align
 
: center;margin: 0 auto;}
        .return{position: fixed;bottom: 50px;}
    </style>
</head>
<body>
<div class="container">
    <img src="http://maopeijiong.site/src/img/grimm.jpg" alt="格林獵人圖片一張" id="re"></img>
</div>
<a href="#re"><p class="return">返回至圖片</p
 
></a>
</body>
</html>

檢視效果

一些想法

注意到點選返回後的url變成了
點選後的位址列

url裡多了一個hash，是這麼叫的吧(反正chrome裡是location.hash這麼叫的)。所以這錨點跳轉可以看到一個連結跳轉，和點選滾動事件(jquery 的offset().top)還是有本質區別的，不過jquery跳轉平緩很多，錨點跳轉感官上不咋地。

純css實現的切換

錨點跳轉也算是css跳轉，突然想到用label的屬性實現的內容切換，就一併複習下。

程式碼塊

<!DOCTYPE html>
 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label切換內容</title>
    <style>
        .container{width: 800px;height: 250px;margin: 0 auto;position: relative;}
        .tab{width: 25%;float: left;margin-right: -1px;box-sizing: border-box;}
        .tab .testTabLabel{text-align: center;display: block;background: #e2e2e2;height: 24px;padding: 5px 0;border: 1px solid #ccc;}
        .tab .test-radio, .tab .testTabCon{position: absolute;left: -999em;}
        .test-radio:checked ~ .testTabLabel{border-bottom: 1px solid #fff;background: #fff;position: relative;z-index: 1;}
        .test-radio:checked ~ .testTabCon{left: 0;border: 1px solid #ccc;border-top: 0;width: 763px;padding: 2em 1em;}
    </style>
</head>
<body>
<div class="container">
    <div class="tab">
        <input type="radio" id="testTabOne" class="test-radio" name="tab" checked="checked"/>
        <label class="testTabLabel" for="testTabOne">選項1</label>
        <div class="testTabCon">
            <p>第一張選項卡的內容</p>
        </div>
    </div>
    <div class="tab">
        <input type="radio" id="testTabTwo" class="test-radio" name="tab"/>
        <label class="testTabLabel" for="testTabTwo">選項1</label>
        <div class="testTabCon">
            <p>第二張選項卡的內容</p>
        </div>
    </div>
    <div class="tab">
        <input type="radio" id="testTabThree" class="test-radio" name="tab"/>
        <label class="testTabLabel" for="testTabThree">選項1</label>
        <div class="testTabCon">
            <p>第三張選項卡的內容</p>
        </div>
    </div>
    <div class="tab">
        <input type="radio" id="testTabFour" class="test-radio" name="tab"/>
        <label class="testTabLabel" for="testTabFour">選項1</label>
        <div class="testTabCon">
            <p>第四張選項卡的內容</p>
        </div>
    </div>
</div>
</body>
</html>

檢視效果

相關推薦

關於錨點和label的純css內容切換

關於錨點的幾則 錨點跳轉就是根據url跳轉，做的一項定位 一般有兩種方法： 1. a標籤的name屬性 2. id 考慮每次使用a的name有點浪費標籤，所以建議使用id 程式碼塊 <!DOCTYPE html> &l

[UE4]UMG編輯器：控件作為變量、預設錨點和自由錨點

http 編輯 png ima bubuko 錨點 分享 com bsp [UE4]UMG編輯器：控件作為變量、預設錨點和自由錨點

<a>標籤連結到<a>錨點和其他標籤錨點的區別

一、<a>標籤連結到<a>錨點可以使用name屬性或者id屬性 1、name <body> <a  href="#cc">ccccc</a>  </br></br></br>

導航定位(利用錨點和jquery定位)

在網頁中，點選按鈕就會跳轉到相應的位置，滑動頁面，左邊的列表顏色就會變化到相應的顏色,滾動條也會相應改變。 這個功能利用了jquery裡的scroll事件。先講點選列表，跳轉到相應的位置。在htm

原生JS實現的JSON陣列排序，關鍵字錨點跳轉到指定內容區

原生JS實現的仿點選錨點對應模組跳轉到指定的位置，錨點關鍵字從模組中取出，去除重複值按照由大到小的順序排序//JSON陣列按指定值進行排序排序,name:排序規則        function jsonSort(jsonarr,name,snum){            //如果陣列<=1,則直接返

使用:target實現點選按鈕切換圖片的功能（純CSS）

今天使用CSS中的:target選擇器來實現點選按鈕切換相對應的圖片的demo，此demo也可以使用JS來實現。 demo的結構： <a href="#img1">img

偏前端-純css,手寫輪播-（焦點切換 和 自動輪播 只可選擇一種，兩者不可共存）

set abs aci count right container 是什麽 設置 網上 現在我們一般都是在網上找個輪播插件，各種功能應有盡有，是吧！！~大家似乎已經生疏了手寫是什麽感覺。萬一哪天想不起來，人家要手寫，就尷尬了！~~跟我一起復習一下吧 不多說：效果圖看一下：

純CSS實現錨點跳轉位置上下偏移的辦法

昨天在sf的時候看到了一位朋友的提問，是問如何使頁面上的a標籤被點選時跳轉的錨點的位置往下偏移一點，不會被最上方的header給遮蓋。當時看到這個問題也沒想出純CSS的解決方法，以為只有用js才能實現，後來另一位朋友的解答，恍然大悟，在他給出的方法上加以修改，完

純css實現點選切換樣式

原理： 利用 a偽類選擇器，focus。（獲得焦點設定樣式，失去焦點恢復樣式）注意： active 和 focus的區別，active是點選 a標籤時（從滑鼠按下開始 到滑鼠擡起結束。）        focus是獲得焦點，與失去焦點時觸發相應的樣式示例demo： <s

關於Unity中NGUI的Pivot和錨點

wid height http -1 貼圖 關於 位置 ngui 技術 Pivot 創建一個Sprite1節點，關聯一個圖集和一張貼圖，用圖中的六個按鈕調整這個貼圖的Pivot點，一共有八個點可以選擇 再創建一個Sprite2節點，作為Sprite1節點的子節點，關聯一個圖

[原創]css中a標簽去掉錨點文本下劃線

記錄 asp href 實例 參數 ext -s get 其他 我對博客的認識是：記錄問題，解決問題，分享知識。如果有輪子，我不需要造輪子。 1.問題解決方式： 　　設置屬性：text-decoration:none; 2.更多屬性參數參考 　　text-decor

3.易錯點和新要掌握的內容

多行 aaa nco def 多次 split open utf 要掌握 s=‘abncd‘show,condit=s.split(‘where‘)#可以用兩個變量去接受split切出來的內容當有一級要使用某一個可叠代對象中的的數據中的值時，要將這個可叠代對象放在這一級的內

分享：純 css 瀑布流 和 js 瀑布流

整體 初始化 onload 其它 一行 edi mar 排列 ref 分享一次純 css 瀑布流 和 js 瀑布流 純 css 寫瀑布流 1.multi-columns 方式： 通過 Multi-columns 相關的屬性 column-count、column-ga

標簽點擊效果切換+內容切換

radi ont gis back wid dcl 分享 spl pla 1.效果 列 點擊切換後 2. <div class="register-title" id="register-Personal-Corporate" style="margi

純css手寫圓角氣泡對話框 微信小程序和web都適用

web aaaaa nsf 就是 dia any get 我想 不生效 嗯……我們設計師強烈要求一定要圓角！圓角的氣泡對話框，不要那種尖角的。這其中還遇上了個尷尬的問題，z-index不生效 無非就是兩種方法，一種是使用圖片再定位拼接起來使用，

【LAYABOX】軸心點和錨點

縮放 右上角 概念 pri http 寬度 舞臺 net 像素 https://blog.csdn.net/RuoYeKnight/article/details/77947288 軸心點和錨點是一個概念，都是基準點，決定了圖片在舞臺的位置， 簡單地說，若對sprite

純CSS的導航欄Tab切換方案

1、使用：target偽類選擇器以及兄弟選擇器的使用~ :target 是 CSS3 新增的一個偽類，可用於選取當前活動的目標元素。當然 URL 末尾帶有錨名稱 #，就可以指向文件內某個具體的元素。這個被連結的元素就是目標元素(target element)。它需要一個 id 去匹配文

python學習之網站的編寫（HTML，CSS，JS）（八）----------label標籤，點選label標籤的文字將編輯的游標移過來

 如果不加label的話，只設置值的話，點選文字是不能將編輯的游標移過來的，必須將id連線上之後，才可以實現，點選文字就可以將編輯的游標移過來。 實現結果： 程式碼： <!DOCTYPE html> <html lang="en"> <hea

純css實現水平無限滾動--適應PC和移動端

一、HTML <style type="text/css"> * { margin: 0; padding: 0; list-style: none;

純 CSS 利用 label + input 實現選項卡

label dev 滾動 for center -- meta absolut 獲得 clip 屬性 用於剪裁絕對定位元素。 .class { position:absolute; clip:rect(0px,60px,200px,0px); }