مثال على تحقيق تأثير تغيير اللون البسيط للصفحة باستخدام jQuery

هذا المثال يشرح كيفية تحقيق تأثير التبديل الجلد البسيط باستخدام jQuery. يُشارك الجميع للمراجعة، كما يلي:

هناك 4 ملفات: skin.html،blue.css،green.html،red.html،وكلها في نفس الدليل.

1、skin.html

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<head>
  <title>皮肤切换演示</title>
  <--引用百度CDN的jquery-->
  <script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <link href="blue.css" id="skincss" rel="stylesheet" type="text/css"/>
  <script type="text/javascript">
    $(document).ready(function(){
      //切换皮肤
      $('#skin_list').change(function(){
        skin_name = $(this).val()
        skin_ skin_name + ".css"
        $("#skincss").attr("href", skin_href)
      });
    });
  </script>
</head>
</head>
<body>
  <--皮肤列表-->
  <div>
    قائمة الجلود:
    <select id="skin_list">
      <option value ="blue">أزرق</option>
      <option value ="green">أخضر</option>
      <option value ="red">أحمر</option>
    </select>
  </div>
  <div>
    <ul>
      <li>اليوم</li>
      <li>المزاج</li>
      <li>جيد</li>
    </ul>
  </div>
</body>
</html>

النقطة الرئيسية الوحيدة هي هذه الأنظمة الجافا سكريبت القليلة. لكي أظهر لكم الكامل، قمت بلصق كود html بالكامل.

2، blue.css

li {color:blue;}

3، green.css

li {color:green;}

4، red.css

li {color:red;}

قد يعتقد بعض القراء أن جملة واحدة تعمل على ملف css، ولكنني أريد أن أبين كيف يمكن تطبيق ذلك على نطاق أوسع، أتمنى أن لا أكون قد أزعجتكم.^_^

5، الصورة التالية:

يمكن للقراء المهتمين بجافا سكريبت التحقق من المقالات الخاصة على هذا الموقع: ‘تجميع تقنيات توسيع جافا سكريبت’، ‘تجميع إضافات جافا سكريبت الشائعة’، ‘تجميع تقنيات التأثيرات والأساليب لجافا سكريبت’، ‘تجميع تقنيات تعامل الجداول (الجداول) لجافا سكريبت’، ‘تجميع استخدامات أجاكس في جافا سكريبت’، ‘تجميع التقنيات المميزة لجافا سكريبت’، ‘تجميع استخدامات الأنيمات والتفاوتات لجافا سكريبت’، و‘تجميع استخدامات ميزة المطور لجافا سكريبت’.

آمل أن يكون هذا المقال قد ساعدكم في تصميم برامج جافا سكريبت.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ملكية حقوق النشر تخص صاحب المقال، المحتوى تم إدراجه من قبل مستخدمي الإنترنت بذاتهم، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل الموقع أي مسؤولية قانونية تتعلق بذلك. إذا وجدت محتوى يشتبه في انتهاك حقوق النشر، يرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وقدم الدليل على الأدلة، وسيتم حذف المحتوى المزعوم فورًا إذا تم التحقق من صحته.

تعليمية الأساس

مفضل لك