【練習】jQuery

阿新 • • 發佈：2017-12-26

pen 3.2 smo doctype weight otto solid -h 技術

作業要求：

參考下圖，點擊展示不同內容。

技術分享圖片

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .header{
            background-color: whitesmoke;
            width: 100%;
            height 
: 50px;
            border-bottom: 2px solid red;
            position: relative;
        }


        .action {
            height: 50px;
            color: #696969;
            font-size: 22px;
            font-weight: 200;
            line-height: 50px;
            padding: 1px 30px 1px 30px;
        }
         .shopping_car a 
{
             text-decoration: none;
             height: 50px;
             color: white;
             font-size: 13px;
             font-weight: 200;
             padding: 0px 15px 0 15px;
             background-color:     #ee0f23;
             line-height: 50px;
             position: absolute;
             left 
:1500px;
             top:0px;
        }

         .img_cont img{
             margin-top: 52px;

         }


        .a1 {
            position: absolute;
            left:0;
            top:0;
        }

        .a2{
            position: absolute;
            left:150px;
            top:0;
        }

        .a3{
           position: absolute;
            left:300px;
            top:0;
        }

        .a4{
           position: absolute;
            left:450px;
            top:0;
        }

        .a5{
           position: absolute;
            left:680px;
            top:0;
        }



        .hide{
            display: none;
        }

        .change {
            background-color:     #ee0f23;
            color: #F5F5F5;
        }


    </style>
</head>
<body>
    <script src="jquery-3.2.1.min.js"></script>

    <div class="header">
        <div class="item">
            <div class="action a1">商品介紹</div>
            <div class="img_cont hide">
                    <img src="商品介紹.jpg" alt="">
            </div>
         </div>

        <div class="item">
            <div class="action a2">規格與包裝</div>
            <div class="img_cont hide">
                    <img src="規格包裝.jpg" alt="">
            </div>
         </div>

        <div class="item">
            <div class="action a3">售後保障</div>
            <div class="img_cont hide">
                    <img src="售後保障.jpg" alt="">
            </div>
         </div>

        <div class="item">
            <div class="action a4">商品評價(3.8萬+)</div>
            <div class="img_cont hide">
                    <img src="商品評價.jpg" alt="">
            </div>
         </div>

        <div class="item">
            <div class="action a5">社區互動</div>
            <div class="img_cont hide">
                    <img src="社區互動.jpg" alt="">
            </div>
         </div>


        <span class="shopping_car">
            <a href="">加入購物車</a>
        </span>
    </div>

    <script>
        $(".action ").click(function () {
            $(this).addClass("change");
            $(this).next().removeClass("hide");
            $(this).parent().siblings().children(".action").removeClass("change");
            $(this).parent().siblings().children(".img_cont").addClass("hide");

     })

    </script>



</body>
</html>

案例

【練習】jQuery

pen 3.2 smo doctype weight otto solid -h 技術作業要求：參考下圖，點擊展示不同內容。例： <!DOCTYPE html> <html lang="en"> <head> &l

【轉】jquery cookie操作

訪問網站 blog cookie img jquer src dom 存儲購物 Cookie是網站設計者放置在客戶端的小文本文件。Cookie能為用戶提供很多的使得，例如購物網站存儲用戶曾經瀏覽過的產品列表，或者門戶網站記住用戶喜歡選擇瀏覽哪類新聞。在用戶允許的情況下，

【轉】JQuery選擇器

log fieldset radi query 選擇器序號 html 數組 cnblogs 原址：http://www.cnblogs.com/onlys/articles/jQuery.html jQuery 的選擇器可謂之強大無比，這裏簡單地總結一下

【練習】reserving.kr之easy ELF

() style col code color cde correct res 分析打開主函數： int __cdecl main() { int result; // [email protected] write(1, "Reversing.Kr

【JS】jQuery中將數組轉換成字符串join()和push()使用

div array code span 數組分隔 ext class on() 1、push()將元素依次添加至數組；2、join()將數組轉換成字符串，裏面可以帶參數分隔符，默認【,】 <script type = text/javascript>

【練習】友元類和友元函數

turn main spa std return col print pri circle #include <iostream> using namespace std; class Circle; class Point { private: fl

【轉載】jquery 滾動條插件jquery.slimscroll.js

query 推薦 page 默認 tor post w3c 設置 scrip 轉載http://www.w3cways.com/1910.html jquery.slimscroll.js插件是一個支持把內容放在一個盒子裏面，固定一個高度，超出的則使用滾動。 jquery.

【七】jquery之屬性attr、 removeAttr、prop

讀書 else mov back rem remove checked asc ava 全選全不選界面：代碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

【練習】購物車程序

用戶名啟動程序 int enum body 8.0 end menu 工資 # -*- coding:utf8 -*-# Author: Wsq 2018.03.20# 功能要求：# 1、啟動程序後，輸入用戶名密碼後，讓用戶輸入工資，然後打印商品列表# 2、允許用戶根據商

【練習】字典的循環遍歷：實現多層級節點存取

輸入 lose 功能 print path input 內存地址 sleep pat 關鍵點：字典、列表、集合等可變類型，若將一個可變類型賦給變量A和B，通過B改變了該可變類型內部的元素，指向該可變類型內存地址的變量A的值一樣會跟著改變（因A、B同時指向了一個內存地址）

【學習】jquery.placeholder.js讓IE瀏覽器支持html5的placeholder

jquery HERE zha username 瀏覽器 http ie瀏覽器 rdp 實際應用原文鏈接：https://www.cnblogs.com/xiaoxianweb/p/5692301.html type為text或password的input，其在實際應用時

【轉】Jquery中$.get(),$.post(),$.load(),$.ajax(),$.getJSON(),$.getScript()的用法總結

ear regexp 選項 scrip ajax請求 doc orm err enc 一，$.get(url,[data],[callback]) 實現GET方法說明： url (String) 發送請求的URL地址. data (Map)(可選參數) 要發送給服務器的數

jQuery從0開始之【二】jQuery使用原則及常用事件

命名學習者 proto js文件事件自己 -o 註意如果 jQuery名稱沖突問題：jQuery使用$符號作為jQuery的簡介方式。但是某些JavaScript庫中的函數（比如Prototype）同樣使用$符號。jQuery使用名為noConflict()的方法

【練習】小機房的樹

namespace color dep std targe urn 最短路徑 oid i++ 2370 小機房的樹 //講真我覺得這題面有點惡心QAQ 大體思路：樹上的最短路徑一定經過兩點lca，預處理一個dis數組，存每個點到根節點的距離，兩點（x， y）

【轉】jQuery 的 ajax 方法，返回結果 readyState=4 並且 status=200 時，還進 error 方法

err 前端 log 報錯但是 tail 格式 success ajax 今天在使用jquery.ajax方法去調用後臺方法時，ajax中得參數data類型是"JSON"，後臺DEBUG調試，運行正常，返回正常的結果集，但是前端一直都進到ajax的error方法，百思不得

【練習】滑動視窗

P1886 滑動視窗單調佇列經典題目直接上程式碼 1 #include<cstdio> 2 #include<cstring> 3 #include<iostream> 4 using namespace std; 5 const

【練習】最大子序和

Tyvj P1305最大子序和《進階指南》單調佇列例題連續子序和一般轉化為字首和維護，記為sum陣列，連續的子序列[l, r] 的和即為sum[r] - sum[l - 1] 原問題轉化為找到兩個位置l, r ，使得sum[l] - sum[r] 最大且 r - l <=

【練習】自然數拆分Lunatic版

Tyvj 1172 自然數拆分Lunatic版題意：給定一個自然數n（1<= n <= 4000），要求把自然數n拆分成n個正整數相加的情況（正整數可以重複出現，但順序不同仍視為同一種情況qaq）求方案數mod 2147483648的值完全揹包求方案數（又雙叒叕不開long lon

【練習】砝碼稱重

P1441 砝碼稱重思路：dfs列舉去掉哪些砝碼， 01揹包求方案數，各種情況取max記為ans輸出√ 邊界情況處理不好交了三遍QAQ dp[j] = dp[j] + dp[j - a[i]] 選上這個砝碼的情況+ 不選的情況 1 #include<cstdio>

【前端】jQuery DataTables 使用手冊（精簡版）【前端】jQuery DataTables 使用手冊（精簡版）

【前端】jQuery DataTables 使用手冊（精簡版）一、常用屬性 //把公共的設定項都放在這裡，就不需要每個頁面都設定一遍了，放在jQuery物件上是為了避免汙染全域性變數window.dataTablesSettings = { processing : false,//是否顯

【練習】jQuery

相關推薦