Блог

Главная - Вопросы по программированию - Как иметь случайное изображение при каждом обновлении для одной таблицы стилей, но уходить при выборе другой таблицы стилей?

Как иметь случайное изображение при каждом обновлении для одной таблицы стилей, но уходить при выборе другой таблицы стилей?

#php #javascript #html #css #wordpress

#php #javascript #HTML #css #wordpress

Вопрос:

В настоящее время я работаю над своей собственной темой WordPress. Я подумал, что было бы здорово иметь выпадающий список на боковой панели, в котором вы можете выбирать разные темы, И это немного изменит фон страницы, цвета границ и т. Д.

Дело в том, что для одной темы (по умолчанию) У меня есть Javascript в моем header.php файл, в котором изображение заголовка будет меняться при каждом обновлении. Я хочу, чтобы это изображение заголовка исчезало при переключении таблиц стилей, но оно просто перекрывает другое. Как мне это изменить?

Если вы хотите убедиться сами, поле находится на правой боковой панели под синими кнопками. Это мой тестовый сайт. Игнорируйте материал 000webhost.

http://trainman1405.site11.com/wordpress/

Спасибо!

Ответ №1:

Общее решение здесь состоит в том, чтобы определить все ваши стили на одном листе, но именовать их так, чтобы вы могли просто изменить class на body , и новые стили вступят в силу. (Вы также можете определить их на отдельных листах, используя пространства имен, и просто ссылаться на каждый лист в вашем <head> .)

Например, некоторые CSS:

 body a { color: #00f; } /* default */
body.green a { color: #090; }
body.red a { color: #f00; }

А затем, когда вы захотите его изменить (используя jQuery, хотя обычный Javascript тоже может выполнить эту работу):

 $('#theme_select').change(function()
{
   $('body').removeClass('green').removeClass('red'); // remove existing classes
   $('body').addClass($(this).val()); 
});

Ответ №2:

похоже, вы могли бы использовать библиотеку javascript, которая называется jquery. Вы могли бы использовать это, чтобы скрыть и отобразить новое изображение, например

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> 

<script type="text/javascript">



function piczotheme() {

$("defualttheme").hide()
$("mountaintheme").hide()

//and then show load add your picture

$('#defualt').css("background-image", "url(url of the picture)");




}


</script>

и затем вам нужно настроить кнопку или что-то еще, чтобы вызвать этот эффект

итак…

 <button onclick="piczotheme()"> click </button>