هل من الممكن تعيين نمط الارتباط الذي يظهر فقط عند عرض صفحة الويب المرتبطة؟

StackOverflow https://stackoverflow.com/questions/195578

  •  10-07-2019
  •  | 
  •  

سؤال

واجهت مشكلة كهذه (هذه قائمة html/css):

eShop | eShop آخر | eShop آخر

يريد العميل أن يعمل على النحو التالي:

يأتي المستخدم إلى موقع الويب، وينقر على Eshop.يتغير Eshop إلى اللون الأحمر مع مخطط مربع أحمر.يقرر المستخدم زيارة متجر إلكتروني آخر، لذلك سيعود Eshop إلى اللون الطبيعي بدون مخطط مربع أحمر، وسيقوم متجر إلكتروني آخر بخدعة المخطط الأحمر مرة أخرى..

أعلم أن هناك A: تمت زيارته ولكني لا أريد أن تكون جميع روابط القائمة التي تمت زيارتها باللون الأحمر مع مخطط مربع أحمر.

شكرا لأية مساعدة :)

هل كانت مفيدة؟

المحلول

ونفس الشيء أن جو Skora كتب ولكن أكثر تحديدا: 

.red {
    outline-color:red;
    outline-width:10px;
}

والآن هل يمكن استخدام جافا سكريبت (في هذا المثال باستخدام مسج ) في معالج النقر الحدث: 

$('.red').removeClass('red'); // removes class red from all items with class red
$(this).addClass('red'); // adds class red to the clicked item

وهناك طريقة أخرى للقيام بذلك هو استخدام محدد الزائفة: الهدف
للحصول على معلومة حول هذا الموضوع: www.thinkvitamin.com

نصائح أخرى

يمكنك القيام بذلك باستخدام CSS وHTML العاديين.إحدى الطرق التي نستخدمها عادةً هي الحصول على معرف مطابق ومحدد فئة لكل عنصر تنقل.

الفائدة من ذلك هي أنك لست مضطرًا إلى تعديل ملفك رمز القائمة لكل صفحة، يمكنك تعديل الصفحة نفسها, ، وهو ما ستفعله بالفعل ما لم يكن كل شيء ديناميكيًا بالكامل.

يعمل مثل هذا:

<!-- ... head, etc ... -->
<body>

<ul class="nav">
    <li><a href="home.html" class="nav-home">Home</a></li>
    <li><a href="art.html" class="nav-art">Art</a></li>
    <li><a href="contact.html" class="nav-contact">Contact</a></li>
</ul>

<!-- ... more page ... -->

</body>

ثم تقوم بإعداد بعض CSS مثل هذا:

#NAV-HOME .nav-home,
#NAV-ART .nav-art,
#NAV-CONTACT .nav-contact { color:red; }

لتغيير عنصر القائمة "الحالي"، يمكنك فقط تعيين المعرف المقابل لعنصر أعلى في بنية المستند.عادةً ما أقوم بإضافته إلى علامة <body>.

لإبراز صفحة "الفن"، كل ما عليك فعله هو:

<!-- The "Art" item will stand out. -->
<body id="NAV-ART">

<ul class="nav">
    <li><a href="home.html" class="nav-home">Home</a></li>
    <li><a href="art.html" class="nav-art">Art</a></li>
    <li><a href="contact.html" class="nav-contact">Contact</a></li>
</ul>

<!-- ... more page ... -->

</body>

ويمكنك القيام بذلك مع الطبقات CSS. على سبيل المثال، <م> اختيار الطبقة يمكن تحديد المحل الحالي، وتغيير اللون والخطوط العريضة. ثم يمكنك تغيير التحديد عن طريق إضافة / إزالة الفئة من عنصر القائمة.

ونلقي نظرة هنا ، فإنه يمشي من خلال البرنامج التعليمي على بناء القوائم CSS .

والأساس، فإنه لا يمكن القيام به مع CSS وحدها، فإن بعض البرمجة يجب أن تأخذ مكان (خادم أو العميل، ويفضل أن يكون الخادم). كما اقترح آخرون، إضافة فئة "المختارة" (أو شيئا من هذا القبيل) إلى وصلة نشطة، وتحديد الأساليب لفي CSS.

وعلى سبيل المثال، فإن الروابط: 

 <a href="#">Eshop</a> | <a href="#" class="selected">Another eshop</a> | <a href="#">Another eshop</a>

والأنماط: 

.selected {
     font-weight:bold;
     color:#efefef;
}

وسوف يتم إنشاء الروابط حيوي، وذلك باستخدام PHP على سبيل المثال: 

 <?php
 foreach(array('eshop' => '#','another eshop' => '#','yet another eshop' => '#') as $title => $url) {
      echo '<a href="' . $url . '"' 
           . ($url == $_SERVER['REQUEST_URI'] ? ' class="selected"' : null) 
           . '>' . $title . '</a>'; 
 }

لو أنت تنتقل إلى صفحة جديدة في نفس نافذة المتصفح، زاك مولجرو و بوبي جاك كلاهما لديه إجابات ممتازة.

إذا كنت تفتح رابط eshop في نافذة جديدة، فليس هناك الكثير مما يمكنك فعله باستخدام CSS وحده، و ع لديه إجابة معقولة باستثناء اختيار اسم فئة (أحمر).

والذي هو؟

وبقدر ما أنا أعلم أنك تستطيع أن تفعل ذلك إلا عن طريق توليد رمز مختلف عن كل صفحة (تحديد فئة مختلفة عن الصفحة الحالية) أو باستخدام جافا سكريبت لتغيير القائمة بعد يتم تحميل الصفحة.

هل يمكن استخدام وصفة محدد مثل هذا ... 

a[href^="http:\\www.EShop"]:visted { color: red; }

ومن يفعل ذلك أنت تقول أي صلة له أ href الذي يبدأ ب http: \ Eshop.com وتم زيارة قام تطبيق هذا النمط

وذلك يعتمد على كيفية إنشاء صفحات موقعك، ولكن CSS الكلاسيكية للقيام بذلك هو مع معرف على الجسم، وكذلك كل وصلة الملاحية، لذلك قد يكون لديك شيء من هذا القبيل:

eshop.html 

<body id="eshop">
  <ul>
    <li><a href="" id="link-eshop">Eshop</a></li>
    <li><a href="" id="link-aeshop">Another eshop</a></li>
    <li><a href="" id="link-eshop-three">Another eshop</a></li>
  </ul>
</body>

ووالمقابلة CSS: 

#eshop #link-eshop, #aeshop, #link-aeshop, #eshop-three #link-eshop-three
{
    color: red;
    outline: 1px solid red;
}

والملاحة يتسق. فقط هوية على الجسم يتغير من صفحة إلى أخرى.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top