Cara menggunakan jquery load css

By On Sunday, October 16th, 2022 Categories : Tanya Jawab

Cara menggunakan jquery load css – Apa khabar bapak dan ibu semua, Selamat datang di web site Trend Wisata dot com ini. Pagi ini, kita dari web Trend Wisata dot com akan sharing tanya jawab yang menarik yang menunjukkan pada anda mengenai Cara menggunakan jquery load css. Ini dia sobat simak di bawah ini:

Apa yang saya kerjakan itu sederhana.

Anda mengklik tombol (id="themes") dan itu membuka div (id="themedrop") yang meluncur dan mencantumkan tema. (Saya hanya punya dua pada saat ini)

<button id="original">Original</button><br />
<button id="grayscale">Grayscale</button>

Sekarang ketika situs dimuat itu memuat dengan style1.css (tema utama/asli)

<link rel="stylesheet" type="text/css" href="https://kafesentul.com/style1.css">

Sekarang yang saya coba cari tahu adalah … Bagaimana saya bisa mendapatkannya ketika tombol grayscale diklik untuk mengubah stylesheet dari style1.css ke style2.css (catatan: file berada di direktori yang
sama)

Bantuan apa pun akan sangat dihargai.

$('#grayscale').click(function ()
   $('link[href="https://kafesentul.com/style1.css"]').attr('href','style2.css');
);
$('#original').click(function ()
   $('link[href="style2.css"]').attr('href',"https://kafesentul.com/style1.css");
);

Cobalah ini tetapi tidak yakin apakah itu akan berhasil saya belum mengujinya tetapi keberuntungan.

Saya sarankan Anda memberi tag
link– id seperti tema. Masukkan nama file css di atribut data– pada tombol dan gunakan penangan yang sama pada keduanya:

Html:

<link id="theme" rel="stylesheet" href="https://kafesentul.com/style1.css">

<button id="grayscale" data-theme="style2.css">Gray Theme</button>

Dan js:

$("button[data-theme]").click(function() 
    $("head link#theme").attr("href", $(this).data("theme"));

cara cepat untuk melakukannya adalah,

<link id="original" rel="stylesheet" type="text/css" href="https://kafesentul.com/style1.css">
<script>
function turnGrey()
document.getElementById("original").href="grey.css";<!-- what ever your new css file is called-->

</script>
<button id="grey" onclick="turnGrey">Turn Grey</button><br />

Gunakan ini :

<link href="https://kafesentul.com/Custom.css" rel="stylesheet" />
<link href="Blue.css" rel="stylesheet" />
<link href="Red.css" rel="stylesheet" />
<link href="Yellow.css" rel="stylesheet" />



<select id="changeCss"`enter code here`>
        <option onclick="selectCss(this)" value="Blue">Blue</option>
        <option onclick="selectCss(this)" value="Red">Red</option>
        <option onclick="selectCss(this)" value="Yellow">Yellow</option>
    </select>

<script type="text/javacript">
function selectCss() 
            var link = $("link[rel=stylesheet]")[0].href;
            var css = link.substring(link.lastIndexOf("https://kafesentul.com/") + 1, link.length)
            $('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css');
        
</script>

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Dalam tutorial ini kita akan merubah situs biasamu dan mengembangkannya dengan
menggunakan jQuery. Kita akan menambahkan ajax functionality sehingga konten yang dimuat ke dalam kontainer yang relevan tanpa membuat pengguna harus bernavigasi ke halaman lain. Kita juga akan mengintegrasikan beberapa animasi yang menarik.

Pertama, saya telah menaruh sbuah layout sederhana untuk contoh ini. Berikut adalah screenshot dan kode HTML yang kami gunakan.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mmm... Ajax!</title>
<script type="text/javascript" src="https://kafesentul.com/jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
    <div id="wrapper">
    <h2>ajax ... nettuts</h2>
    <ul id="nav">
        <li><a href="index.html">welcome</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="portfolio.html">portfolio</a></li>
        <li><a href="contact.html">contact</a></li>
        <li><a href="terms.html">terms</a></li>
    </ul>
    <div id="content">      
        <h2>Welcome!</h2>
        <p>Text</p>
    </div>
    <div id="foot">Tutorial by James for NETTUTS</div>
</div>
</body>
</html>

Langkah 1

Pertama, unduh versi paling stabil terakhir dari jQuery dan sambungkan dengan dokumenmu.

<script type="text/javascript" src="https://kafesentul.com/jQuery.js"></script>

Satu hal terbaik, menurut saya, tentang jQuery adalah kesederhanaannnya. Kita bisa meraih fungsi yang dideskripsikan di atas dengan efek menarik hanya dalam beberapa baris kode.

Pertama mari muat jQuery dannmemulai sebuah fungsi ketika dokumen telah siap (ketika DOM telah dimuat)

$(document).ready(function() 
	// Stuff here
);

Langkah 2

Apa yang kita lakukan adalah membuatnya sehingga ketika pengguna
mengklik di link dalam menu navigasi, browser tidak akan menavigasi ke halaman tersebut namun akan memuat konten tersebut di halaman yang sama.

Kam ingin menargetkan link di dalam menu navigasi dan menjalankan fungsi ketika dia diklik

$('#nav li a').click(function()
	// function here
);

Mari rangkum apa yang kita ingin fungsi ini lakukan secara berurutan.

  1. Menghapus konten halaman yang sekarang.
  2. Mendapatkan dan menambahkan ke konten DIV

Kita harus menentukan halaman apa untuk mendapatkan data ketika
link diklik. Yang perlu kita lakukan adalah mendapatkan atribut ‘href’ dari link yang diklik dan menjadikannya sebagai halaman yang datanya akan dipanggil. Dan juga kita perlu menentukan disekitar mana halaman yang akan ditarik – karena kita tidak ingin mengambil SEMUA data, hanya data di dalam ‘content’ div, jadi:

var toLoad = $(this).attr('href')+' #content';

Untuk mengilustrasikan kode di atas mari pikirkan p-engguna mengklik link ‘about’ yang terhubung dengan ‘about.html; – di situasi ini variabelnya bisa menjadi :
‘about.html #content – ini adalah variabel yang akan kita minta panggil di ajax. Pertama, kita harus membuat sebuah efek yang menarik untuk halaman konten yang sekarang. Daripada sekedar membuatnya menghilang kita bisa menggunakan fungsi ‘hide’ di jQuery seperti ini:

$('#content').hide('fast',loadContent);

Fungsi di atas menyembunyikan div #content secara cepat, dan ketika efeknya selesai makan fungsi “loadContent” (memuat konten baru [melalui ajax]) akan dijalankan – fungsi yang akan dibuat nanti (di langkah 4 )


Langkah 3

Ketika konten yang lama telah menghilang dengan efek yang menarik, kita tidak ingin meninggalkan pengguna sebelum konten yang baru tiba ( terutama ketika mereka memili koneksi internet yang lambat ) jadi kita akan membuat grafik “loading” kecil sehingga mereka tahu sesuatu sedang berjalan di latar belakang.

$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');

Ini
adalah CSS terapan untuk #load div yang baru dibuat:

#load 
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url(images/ajax-loader.gif);
	width: 43px;
	height: 11px;
	text-indent: -9999em;

Jadi, secara dasar ‘load’ diatur ke display:none, tapi ketika fungsi fadeIn dimulai ( di kode di atas)itu akan muncul di pojok kanan atas situs dan menampilkan GIF hingga hilang kembali.


Langkah 4

Sejauh ini, ketika pengguna mengklik sebuah link hal di bawah yang akan terjadi:

  1. Halaman yang ada akan hilang dengan efek menarik.
  2. Pesan memuat akan muncul

Sekarang, mari kita tulis
fungsi loadContent yang telah disebut tadi:

function loadContent() 
	$('#content').load(toLoad,'',showNewContent)

Fungsi loadContent adalah memanggil halaman yang diinginkan, lalu ketika selesai, akan memanggil fungsi ‘showNetContent’:

function showNewContent() 
	$('#content').show('normal',hideLoader);

Fungsi showNetContent menggunakan fungsi show jQuery (yang sebenarnya nnama yang sangat membosankan untuk sebuah efek keren) untuk membuat konten baru muncul di dalam div ‘#content‘ . Setelah dipanggil maka akan menjalankan fungsi ‘hideLoade’:

function hideLoader() 
	$('#load').fadeOut('normal');

kita harus ingat untuk ‘return false’ di akhir
dari fungsi klik – sehingga browser tidak bernavigasi ke halaman

Harus sekarang berjalan sempurna. Kamu bisa lihat contohnya di sini: [LINK]

Ini kodenya sejauh ini:

$(document).ready(function() 

    $('#nav li a').click(function()
    
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    function loadContent() 
    	$('#content').load(toLoad,'',showNewContent())
    
    function showNewContent() 
    	$('#content').show('normal',hideLoader());
    
    function hideLoader() 
    	$('#load').fadeOut('normal');
    
    return false;
    
    );
);

Langkah 5

Kamu bisa berhenti di situ tapi jika kamu meningkatkannya, sangat penting untuk menambahkah sedikit pekerjaan kecil. Masalah dengan solusi yang sekarang bahwa itu menelantarkan URL. Bagaimana jika pengguna ingin mengklik link ke salah satu ‘pages’? – tidak ada cara bagi mereka karena URL
nya selalu sama.

Jadi, lebih baik jika kita menggunakan nilai ‘hash’ di URL untuk mengindikasikan apa yang user sedang lihat. Jadi jika mereka melihat konten ‘about; maka URL nya adalah : ‘www.website.com/#about’. Kita hanya perlu menambahkan satu baris kode ke fungsi ‘click’ untuk menambahkan hash ke URL ketika pengguna klik di link navigasi:

window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

Kode di atas pada dasarnya merubah nilai hash URL ke nilai dari atribut ‘href’ dari link yang diklik ( tanpa bagian ‘.hrml’ nya )
Jadi ketika pengguna mengklik link ‘home’ (href=index.html) maka nilai hash nya akan terbaca ‘#index’.

Dan juga, kita ingin membuat mungkin bagi pengguna untuk mengetik URL dan mendapatkan halaman yang tepat. Untuk melakukannya kita cek nilai hash ketika situs dimuat dan mengganti dengan konten yang sesuai:

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function()
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5))
        var toLoad = hash+'.html #content';
        $('#content').load(toLoad)
     
);

disini dimasukkan semua kode javascript yang dibutuhkan: (ditambah pustaka jQuery)

$(document).ready(function() 
	
    // Check for hash value in URL
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function()
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5))
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
         
    );
    
    $('#nav li a').click(function()
    
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() 
    	$('#content').load(toLoad,'',showNewContent())
    
    function showNewContent() 
    	$('#content').show('normal',hideLoader());
    
    function hideLoader() 
    	$('#load').fadeOut('normal');
    
    return false;
    
    );
);

Selesai…

Hal yang bagus dari metode ini adalah bahwa ini bisa
diadaptasi dan diterapkan dalam situs dalam beberapa menit. Ini sepenuhnya ramah dan situsnya akan bekerja normal meskipun pengguna mematikan JS.

Lihat Contoh Hasil Akhir

Unduh HTML, JS, CSS & Gambar

Cara menggunakan jquery load css | admin | 4.5
shopee flash sale gratis ongkir
x