Hongmu Notes
Home Language Notes jquery common codes
Language Notes JavaScript

jquery common codes

jquery common codes

hover event:

<script>
    $(function () {
    $(".pro_box a").hover(function(){
        $(".pro_box a img").eq($(this).index()).attr("src",$(".pro_box a").eq($(this).index()).attr("data-oimg"));
    },function(){
        $(".pro_box a img").eq($(this).index()).attr("src",$(".pro_box a").eq($(this).index()).attr("data-nimg"));
    });
    });
</script>

click event:

<script>
    $(function () {
    $(".pro_box a").hover(function(){
        $(".pro_box a img").eq($(this).index()).attr("src",$(".pro_box a").eq($(this).index()).attr("data-oimg"));
    },function(){
        $(".pro_box a img").eq($(this).index()).attr("src",$(".pro_box a").eq($(this).index()).attr("data-nimg"));
    });
});
</script>

Judgment:

<script type="text/javascript">
    $(function () {
        var open = false;
        var first = true;
        if (first) {
            $("#open a i").addClass("icon-a-13Ashenglve");
            $("#open a i").removeClass("icon-guanbi");
            $(".mune").addClass("none");
            $("#cebian").css({ "background": "none", "width": "0", "height": "0", "top": "unset", "right": "0", "bottom": "0" });
            first = !first;
        }
        $("#cebian").click(function () {
            if (open) {
                $("#open a i").addClass("icon-a-13Ashenglve");
                $("#open a i").removeClass("icon-guanbi");
                $(".mune").addClass("none");
                $("#cebian").css({ "background": "none", "width": "0", "height": "0", "top": "unset", "right": "0", "bottom": "0" });
                open = !open;
            } else {
                $("#open a i").removeClass("icon-a-13Ashenglve");
                $("#open a i").addClass("icon-guanbi");
                $(".mune").removeClass("none");
                $("#cebian").attr("style", "");
                open = !open;
            }
        });
    });
</script>
微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ Author: Hong Mu

webmaster · Thanks for reading, stay tuned for more exciting content

Author homepage View home page →

Related articles

js move the mouse up to modify the style attribute

js move the mouse up to modify the style attribute Language Notes JavaScript

When the mouse hovers over the element, the color changes to red; when the mouse leaves the element, the color changes to black. To retrieve an element by its ID: `document.getElementById()`; Event handler for mouse hover: `onmouseover`; Event handler for mouse leave: `onmouseout`.<!DOCTYPE html><html lang= "en">...
👁 130

Recommended reading

(Adaptive Mobile Version) Electrical Sensor PBootCMS Website Template – 1085

(Adaptive Mobile Version) Electrical Sensor PBootCMS Website Template – 1085 Practical Collection pbootcms Template

An electrical sensor PbootCMS website template supporting both PC and WAP devices. Featuring a modern, precision-oriented design ideal for showcasing electrical sensors, automation products, and technical solutions. It enables industrial automation enterprises to present their products online and attract manufacturing and engineering clients. Template Overview | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.cn | Related Articles...
👁 47
(Adaptive mobile version) Simple, versatile corporate website template – Download PBootCMS corporate website source code (ID: 1086)

(Adaptive mobile version) Simple, versatile corporate website template – Download PBootCMS corporate website source code (ID: 1086) Practical Collection pbootcms Template

A simple, versatile enterprise PbootCMS website template compatible with both PC and WAP devices. Featuring a minimalist, modern design, it is ideal for small and medium-sized businesses to quickly create professional brand websites. It serves as an ideal foundational solution for cost-effective, high-efficiency website development. Template Preview | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.cn | Related Articles: PbootCMS...
👁 36
Locomotive collector keyword deduplication processing (website keyword optimization plug-in)

Locomotive collector keyword deduplication processing (website keyword optimization plug-in) Practical Collection High-speed rail collection

When collecting web pages, the keywords of some websites may be repeated. Or some word segmentation plug-ins may cause multiple word segmentation results to appear repeatedly. At this time, you can use the keyword deduplication processing plug-in! This plug-in can greatly simplify the collection of keywords, which is of great significance to website optimization. PHP plugin! As shown in the picture, above are the test results!
👁 263
(Adaptive Mobile Version) Water Treatment Equipment Website Template – Download Water Purification Equipment Website Source Code (1087)

(Adaptive Mobile Version) Water Treatment Equipment Website Template – Download Water Purification Equipment Website Source Code (1087) Practical Collection pbootcms Template

A PbootCMS website template for water treatment and water purification equipment, compatible with both PC and WAP devices. Featuring a modern, tech-inspired design ideal for showcasing water treatment equipment, water purification systems, and project cases. This template helps environmental water treatment companies demonstrate their expertise online and attract customers. Template Display | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.cn | Related Articles...
👁 69
Resource website typecho001 template

Resource website typecho001 template Program Notes Typecho

typecho001 template template please do not modify the folder name of this template. The folder name is: typecho001 1.4 Fix the js output problem on the article page 1.3 Fix the error prompt when the plug-in is not installed Optimize the list page code output 1.2 Fix the comment function and add a custom homepage title 1.1 Fix the comment reply asymmetry function Add a separate title setting function on the homepage Add the website favicon.ico icon Add one...
👁 198
(Adaptive Mobile Version) SEO-optimized Blog Website Template – 1088

(Adaptive Mobile Version) SEO-optimized Blog Website Template – 1088 Practical Collection pbootcms Template

A SEO-optimized PbootCMS website template compatible with both PC and WAP devices. Its clean and informative design makes it ideal for SEO bloggers to share optimization techniques, industry trends, and case studies. This template helps SEO professionals build their personal brand and knowledge influence online. Template Preview | Installation Instructions | Website Admin Panel: /admin.php | Username: admin | Password: admin | Extraction Password: www.4s5.cn...
👁 58