JQuery改变css切换回鼠标释放

JQuery changing css toggles back on mouse release

本文关键字：鼠标 释放 改变 css JQuery      更新时间：2023-09-26

我试图创建一个相当简单的脚本，它使用链接来切换哪个div正在显示。每一天都有一个div，当点击相应的链接时，它会显示相应的div并隐藏其他的。

这可以工作，但是一旦您释放鼠标，它就会恢复到默认状态。我猜这是非常简单的东西，但我试着四处搜索，找不到任何东西。

下面是我使用的代码:

小提琴

$(document).ready(function() {
    var dayDivs = [];
    var displayDay = 0;
    loadDayDivs();
    adjustDayDisplay();
    $('.day-link').mousedown(function() {
        var linkClicked = $(this).text();
        switch (linkClicked) {
            case "Friday":
                displayDay = 0;
                break;
            case "Saturday":
                displayDay = 1;
                break;
            case "Sunday":
                displayDay = 2;
                break;
        }
        adjustDayDisplay();
    });
    function loadDayDivs() {
        dayDivs[0] = $(".friday-div");
        dayDivs[1] = $(".saturday-div");
        dayDivs[2] = $(".sunday-div");
    }
    function adjustDayDisplay() {
        for (var i = 0; i < dayDivs.length; i++) {
            dayDivs[i].css("cssText", "display: none !important;");
        }
        dayDivs[displayDay].css("cssText", "display: inline !important;");
    }
});
在jsfiddle上，我得到一个奇怪的错误，似乎通常与表单有关。如有任何帮助，我将不胜感激。

应将鼠标按下事件更改为单击事件，并抑制单击事件。

This fiddle works

$('.day-link').click(function(e) {
    e.preventDefault(); // New line

您需要使用click事件并使用event.preventDefault()阻止默认行为，否则浏览器将实际打开链接。这是一个更新的小提琴- https://jsfiddle.net/yLrhrumx/2/

相关文章：