Elementor שינוי צבע כפתור בעת מעבר לעמוד אחר

1ֹ_RACHEL · 2/5/22

יש לי שורת כפתורים שהיא בעצם תפריט, אבל לא בנויה דרך התפריטים, אלא ככפתורים.
כל כפתור מעביר לעמוד אחר באתר
אני צריכה שכל כפתור ישאר צבוע בצבע שאגדיר לו בעת המעבר לעמוד המנותב לו.
מה שאני מצליחה עכשיו לבצע זה שהוא נצבע לי בעת הקליק של העכבר ושאני משחררת את העכבר הוא חוזר לצבע המקורי שלו.
אני צריכה שהוא ישאר צבוע כל עוד הוא בעמוד המיוחס לו.
עם הגדרה של active ב-css זה לא עבד.
איזה קוד יש לזה?
תודה רבה רבה!!!
דחוף לי...

אלעזר 1 · 2/5/22

אפשר עם JS. האם הכפתור הרלוונטי מרונדר לעמוד בצורה שונה כאשר הוא בעמוד הפעיל? (class שונה או נוסף למשל)

1ֹ_RACHEL · 2/5/22

לא class שונה או נוסף, אותו class
מה הקוד ב-JS?

אלעזר 1 · 2/5/22

נכתב ע"י 1ֹ_RACHEL:
מה הקוד ב-JS?

תנו את ה-HTML של הכפתור ולפי זה נוכל לכתוב את הקוד.

1ֹ_RACHEL · 3/5/22

קוד:

<div class="elementor-element elementor-element-77fdb57 round-btn elementor-widget__width-auto elementor-widget elementor-widget-button" data-id="77fdb57" data-element_type="widget" data-widget_type="button.default">
                <div class="elementor-widget-container">
                    <div class="elementor-button-wrapper">
            <a href="https://krambel.s1003.upress.link/%d7%90%d7%91%d7%97%d7%95%d7%a0%d7%99%d7%9d/" class="elementor-button-link elementor-button elementor-size-sm" role="button">
                        <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text">אבחונים</span>
        </span>
                    </a>
        </div>
                </div>
                </div>

1ֹ_RACHEL · 3/5/22

זה בעיקר זה:
<span class="elementor-button-text">אבחונים</span>

והמילה אבחונים משתנה כל פעם לפי שם העמוד המנותב

The gardeners · 3/5/22

לא צריך קוד JS.
אפשר עם סלקטור של visited (במקום active)

1ֹ_RACHEL · 3/5/22

נכתב ע"י The gardeners:
לא צריך קוד JS.
אפשר עם סלקטור של visited (במקום active)

לא עובד עם זה
צובע את כל שורת הכפתורים

The gardeners · 3/5/22

אופציה א': תעשי סלקטור אישי לכל כפתור ולפי זה (קצת מתיש)
אופציה ב': מניחה (לא בטוחה) שהגדרת את הvisited על הקבוצה של הכפתורים.
את צריכה להגדיר את זה ברזולוצית כפתור לדוגמא:

<!DOCTYPE html>
<html>
<head>
<style>
.xxx a:visited {
  color: yellow;
}
</style>
</head>
<body>
<h1>Demo of the :visited selector</h1>
<p>The :visited selector style links to pages you have already visited:</p>
<div class="xxx">
    <a href="#1">a1</a><br>
    <a href="#2">a2</a><br>
    <a href="#3">a3</a>
</div>
</body>
</html>

הם מתחלפים כולם כנראה בגלל שהעתקת את זה וכל הקישורים מובילים לאותו מקום.
תנסי לשנות את הקישורים כ"א למשהו אחר

אלעזר 1 · 3/5/22

active משפיע רק על רגע הלחיצה:

How to style a link that matches the current URL?

I'd like to add a CSS background color to any link in the sidebar navigation (#subnav) that matches the current URL exactly. I've tried div#subnav a:active { background: #f1f2f2; }, but it didn't...

stackoverflow.com

visited משפיע על כל קישור שנכנסנו אליו בעבר.

הקוד הזה יעזור לכם להחיל פעולה על הקישור הפעיל בכל עמוד:

JavaScript:

jQuery(document).ready(function() {
    jQuery('div[data-id="e2bc3c0"]').find('a').each(function(){
        if (this.href == window.location.href) {
            jQuery(this).addClass("active");
        }
    });
});

מקור:

Change link color of the current page with CSS

How does one style links for the current page differently from others? I would like to swap the colors of the text and background. li a { color: #A60500; } li a:hover { color: #640200;

stackoverflow.com

1ֹ_RACHEL · 3/5/22

נכתב ע"י אלעזר 1:
active משפיע רק על רגע הלחיצה:

How to style a link that matches the current URL?

I'd like to add a CSS background color to any link in the sidebar navigation (#subnav) that matches the current URL exactly. I've tried div#subnav a:active { background: #f1f2f2; }, but it didn't...

stackoverflow.com

visited משפיע על כל קישור שנכנסנו אליו בעבר.

הקוד הזה יעזור לכם להחיל פעולה על הקישור הפעיל בכל עמוד:

JavaScript:

jQuery(document).ready(function() { jQuery('div[data-id="e2bc3c0"]').find('a').each(function(){ if (this.href == window.location.href) { jQuery(this).addClass("active"); } }); });

מקור:

Change link color of the current page with CSS

How does one style links for the current page differently from others? I would like to swap the colors of the text and background. li a { color: #A60500; } li a:hover { color: #640200;

stackoverflow.com

תודה רבה!!
איך אני מכניסה את זה בעמוד אלמנטור?

אלעזר 1 · 3/5/22

נכתב ע"י 1ֹ_RACHEL:
תודה רבה!!
איך אני מכניסה את זה בעמוד אלמנטור?

ב-CSS מותאם. כדאי לתת ID לאלמנט שמכיל את הכפתורים כדי שהסלקטור לא ישתנה.
כרגע זה רק מוסיף את הקלאס active לקישור הפעיל, אם אתם צריכים משהו אחר תוכלו לפרט.

1ֹ_RACHEL · 3/5/22

שמה ב-CSS מותאם של כפתור ספציפי?
ב-CSS מותאם הוא כנראה לא מכיר את הכתיבה של Jquery.
מסמן לי איקסים אדומים

את זה - e2bc3c0 אני מחליפה ב-ID שהגדרתי לאלמנט שמכיל את הכפתורים?

ממש תודה!!

ראובן ליבוביץ · 3/5/22

זה JS לא?
מה שידוע לי שמים את זה בווידג'ט html

אלעזר 1 · 3/5/22

נכתב ע"י 1ֹ_RACHEL:
שמה ב-CSS מותאם של כפתור ספציפי?
ב-CSS מותאם הוא כנראה לא מכיר את הכתיבה של Jquery.
מסמן לי איקסים אדומים

טעות שלי, להוסיף את זה בתוך וידגט HTML.

נכתב ע"י 1ֹ_RACHEL:
את זה - e2bc3c0 אני מחליפה ב-ID שהגדרתי לאלמנט שמכיל את הכפתורים?

כן.

1ֹ_RACHEL · 3/5/22

הכנסתי לווידג'ט,
אבל בפועל לא עובד...
אלה הכפתורים

אני עוברת לעמוד קורסים, והכפתור לא צבוע שם..

אלעזר 1 · 3/5/22

נכתב ע"י 1ֹ_RACHEL:
הכנסתי לווידג'ט,
אבל בפועל לא עובד...
אלה הכפתורים
צפה בקובץ המצורף 1111234
אני עוברת לעמוד קורסים, והכפתור לא צבוע שם..

אני לא רואה את הקוד בעמוד, יתכן שהעמוד עדיין נטען מהזיכרון (קאש), נסו למחוק מטמון.

1ֹ_RACHEL · 3/5/22

קוד:

<script>
jQuery(document).ready(function() {
    jQuery('div[data-id="buttons_circle"]').find('a').each(function(){
        if (this.href == window.location.href) {
            jQuery(this).addClass("active");
        }
    });
});</script>

אלעזר 1 · 3/5/22

נכתב ע"י 1ֹ_RACHEL:

קוד:

<script>
jQuery(document).ready(function() {
    jQuery('div[data-id="buttons_circle"]').find('a').each(function(){
        if (this.href == window.location.href) {
            jQuery(this).addClass("active");
        }
    });
});</script>

הקוד הנכון הוא:

קוד:

<script>
    jQuery(document).ready(function() {
        jQuery('#buttons_circle').find('a').each(function(){
            if (this.href == window.location.href) {
                jQuery(this).addClass("active");
            }
        });
    });
</script>

1ֹ_RACHEL · 3/5/22

לא עובד

לא צריך להגדיר עוד משהו לכל כפתור בעצמו?
איך הוא ידע בעצם איך לצבוע את הכפתור?

Elementor שינוי צבע כפתור בעת מעבר לעמוד אחר

משתמש מקצוען

צוות הנהלה

משתמש מקצוען

צוות הנהלה

משתמש מקצוען

משתמש מקצוען

משתמש פעיל

משתמש מקצוען

משתמש פעיל

צוות הנהלה

משתמש מקצוען

צוות הנהלה

משתמש מקצוען

משתמש סופר מקצוען

צוות הנהלה

משתמש מקצוען

צוות הנהלה

משתמש מקצוען

צוות הנהלה

משתמש מקצוען

ממה זה עשוי...? • אתגר 16

תגיות נפוצות