使用css實現點選切換效果

阿新 • • 發佈：2019-01-13

首先先製作一個容器，用來容納所顯示的內容：

HTML程式碼：

<html></html>
<head>
    <meta charset="utf-8">   
    <link href="css/test.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="contain">
    <ul>
        <li></li>
        <li></li>
        <li>/li>
    </ul>
</div>
</body>
</html>

CSS程式碼：

.contain{
        position: relative;
        margin:auto;
        width: 600px;
        height: 200px;
        text-align: center;
        font-family: Arial;
        color: #FFF;
    }

接下來，根據需要設定ul的長度，這裡先製作三個切換視窗，因此將ul的寬度設定為容器寬度的300%，li即為每次切換時顯示的子元素，寬度設定為顯示容器的100%；

HTML程式碼：

<div class="contain">
    <ul>
        <li class="sildeInput-1">one-點選切換</li>
        <li class="sildeInput-2">two-點選切換</li>
        <li class="sildeInput-3">three-點選切換</li>
    </ul>
</div>

CSS程式碼：

.contain ul{
    margin:10px 0;
    padding:0;
    width: 1800px;
}
.contain li{
    float: left;
    width: 600px;
    height: 200px;
    list-style: none;
    line-height: 200px;
    font-size: 36px;
}
.sildeInput-1{
    background: #9fa8ef;
}

.sildeInput-2{
    background: #ef9fb1;
}

 .sildeInput-3{
    background: #9fefc3;
}

效果如下:

可以看到，多出來的部分也被顯示出來了，此時就要給顯示視窗設定overflow:hidden;屬性，將多出來的部分隱藏起來

CSS程式碼：

.contain{overflow: hidden;}

效果如下：

可以看到，多出來的部分全部被隱藏起來了，這樣，我們就可以通過修改ul的margin-left屬性值實現簡單的切換效果。

接下來寫三個單選框用於切換，因為需要實現點選之後才進行切換的效果，此時將lable指向相應的input標籤的id並使用偽類:checked來實現選擇切換的效果。

HTML程式碼：

<div class="contain">
    <input type="radio" name="sildeInput" value="0" id="Input1" hidden>
    <label class="label1" for="Input1">1</label>
    <input type="radio" name="sildeInput" value="1" id="Input2" hidden>
    <label class="label2" for="Input2">2</label>
    <input type="radio" name="sildeInput" value="1" id="Input3" hidden>
    <label class="label3" for="Input3">3</label>
    <ul>
        <li class="sildeInput-1">one-點選切換</li>
        <li class="sildeInput-2">two-點選切換</li>
        <li class="sildeInput-3">three-點選切換</li>
    </ul>
</div>

CSS程式碼

.label1{
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    line-height: 20px;
    color: #FFF;
    background: #000;
    cursor: pointer;
}/*用於調整單選框的屬性以及位置*/
.label2{
    position: absolute;
    bottom: 10px;
    left: 30px;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    line-height: 20px;
    color: #FFF;
    background: #000;
    cursor: pointer;
}/*用於調整單選框的屬性以及位置*/
.label3{
    position: absolute;
    bottom: 10px;
    left: 60px;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    line-height: 20px;
    color: #FFF;
    background: #000;
    cursor: pointer;
}/*用於調整單選框的屬性以及位置*/
#Input1:checked~ul{ margin-left: 0;}/*第一張點選切換*/
#Input1:checked~.label1{ background: #535353;}/*點選後改變單選框顏色*/
#Input2:checked~ul{ margin-left: -600px;}/*第二張點選切換*/
#Input2:checked~.label2{ background: #535353;}/*點選後改變單選框顏色*/
#Input3:checked~ul{ margin-left: -1200px;}/*第三張點選切換*/
#Input3:checked~.label3{ background: #535353;}/*點選後改變單選框顏色*/

效果如下：

最後，再給ul標籤新增transition:all 0.5s;屬性，設定0.5秒的平滑過渡
css程式碼：

.contain ul{transition:all 0.5s;}

這樣，就可以實現頁面的平滑切換了。

使用css實現點選切換效果

首先先製作一個容器，用來容納所顯示的內容： HTML程式碼： <html></html> <head> <meta charset="utf-8"

純html+css實現點選切換tab頁

核心內容是使用單選框實現css的點選事件大致分析一下dom結構，被切換的tab頁和按鈕放在同一個li內一共需要切換三個頁面，也就是說需要有三個li，首先寫一下基本dom結構一、基礎結構我使用的是VScode的軟體，可以使用快捷建立dom，就像使用css選擇器一樣的使用

用js給div繫結事件，實現點選切換效果的幾種方式總結

用js給div繫結事件，實現點選切換效果，總結有如下幾種方式 script type="text/javascript"> function btnAction() { var titleNValue = document.getElementBy

純css實現點選切換樣式

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

原生js實現滑鼠點選切換效果

今天之所以寫一篇關於js的程式碼實現，一方面是因為個人習慣用jquery編寫程式碼，另一方面是因為github這個大平臺拋棄了jquery。 Jquery是一個js庫，極大簡化js程式設計，使用方便，相容性好，這篇文章就以一個例子來說明jq和js的編寫差別。首先我們看一下效果圖：

Fragment+RadioButton實現點選切換頁面效果

首先，我們需要在主佈局檔案中activity_main.xml 放一個容器，方便讓fragment加入進去,底部導航欄使用RedioButton切換頁面，每一個RadioButton都使用了選擇器進行圖片與字型的變化。 &nb

H5 分幀(frameset) 使用分幀寫一個頁面，可以實現點選聯動效果

需要兩個檔案：檔案3.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"

Android 設定主題實現點選波紋效果

開頭先說說大家都知道的Material Design。這裡推薦大苞米的系列部落格，介紹的很全面。 http://blog.csdn.net/a396901990/article/category/2634371 Material Design： &

js+css實現點選按鈕水波紋

.ripple-effect { position: relative; overflow: hidden; } .btn { width: 150px; height: 40px;

在Activity上載入Fragment實現點選切換頁面

在Activity上載入Fragment實現點選切換Fragment 沒有ViewPager的幫助，單憑Fragment實現滑動比較困難，這裡我就只給大家說一下如何實現點選切換。首先是xml的佈局： activity_main.xml <Li

通過css實現單選按鈕效果

剛剛入門（可能還沒入門）的小前端，遇見兩次實現單選按鈕的效果，如下：現在總結一下實現這兩種樣式的程式碼。第一種：<form action="#"> <div class=" info "> <div class="radiobox "

js的判斷以及圖片的點選切換效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js的簡單練習</title> &

RecyclerView實現點選切換

1.定義全域性的布林值 boolean b=false;//實現通過判斷切換 2.實現三個檢視 <LinearLayout android:id="@+id/li" android:layout_width="match_parent" android:la

HTML+js+css實現點選圖片彈出上傳檔案視窗的兩種思路

第一種：CSS實現 <style> <!-- .fileInputContainer{ height:256px; background:url(upfile.png); position:rel

js實現點選切換文字

點選實現文字的切換，通常用在商品的收藏<p id="btn" onclick="changeVal(this);" >展開</p><script> function changeVal(obj){ var val=documen

使用CSS實現按鈕點選波紋效果

有的網站會為按鈕新增點選波紋效果提升網站效果，我們可以簡單實現一下：主要藉助::after偽類及CSS3中的transform和transition屬性： html:<div class="container text-center"> &l

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

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

jQuery實現兩個CSS樣式之間的點選切換

指定CSS樣式之間的點選切換 jQuery實現兩個指定樣式的點選切換的效果：程式碼如下： html程式碼： <div class="green"></div> CSS程式碼

css實現的輪播和點選切換(無js版)

https://github.com/lingxuanHuang/carousel-noJS .slide{ position: relative; margin:auto; width: 600px; height: 200px;

android中listview的item點選切換實現效果（選擇器selector）

public class V2_Adapter_TarentoCreateActivity_OverSea_City extends BaseAdapter{private V2_TarentoCreateActivity_OverSea_Place v2_TarentoCreateActivity_Over

使用css實現點選切換效果

相關推薦