Включая CSS, jQuery и HTML все в один .html

Я искал вокруг, но я не могу найти точно, что я ищу. Я хочу включить оба jQuery и CSS в одну. Html-страницу, но я не могу заставить jQuery работать. Я не новичок в кодировании, но я новичок в jQuery. Вот то, что я до сих пор:Включая CSS, jQuery и HTML все в один .html

http://jsfiddle.net/b63nLkfa/1/

<div class=aboutMe>aboutMe</div> 

<style> 
    .bodyAmendment{ 
     width:100px; 
    } 
    .aboutMe{ 
     background-color: #CCCCCC; 
     height:250px; 
     width:200px; 
     color: white; 
     font-size:32px; 
    } 
</style> 

<script src="jquery-1.11.2.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.aboutMe').click(function() { 
      $(this).toggleClass('bodyAmendment'); 
     }); 
    }); 
</script>

Очевидно, что я хочу, чтобы переключить классы при нажатии (просто изменить ширину DIV).

источник

2014-12-24 Walker

вы, скорее всего, не включили jquery правильно. Я бы предложил размещенный jQuery Google включить в ваш html. –

@wateriswet Я пробовал это целый ряд способов, включая ваши. Кажется, что ничего не работает. Я знаю, что JQuery работает, потому что, когда я использую все 3 листа JSFiddle, он работает так, как должен. Таким образом, моя единственная возможная идея заключается в том, что я не реализовал JQuery должным образом, как вы сказали.http: //jsfiddle.net/8cgeejmt/ – Walker

@Walker Причина, по которой эта скрипка работает, заключается в том, что CSS имеет приоритет в правильном порядке. Если у вас был отменен порядок, до тех пор, пока был применен класс 'hi', все правила в' hi' будут иметь приоритет над любым в 'modify'. –

Вы не выбрали jquery из боковой панели jsfiddle. И удалить

<script src="jquery-1.11.2.js"></script>

или использовать

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

Вот новый link.

источник

2014-12-24 22:54:08 vjdhama

действительно ли это является ответом? это не более чем комментарий – charlietfl

Тогда вся суть в том, что все это входит в один HTML-лист ..... – Walker

Хорошо используйте второй вариант вместо этого и не используйте jsfiddle, так как он там не будет работать. Вставьте весь контент в html-файл и попробуйте запустить его в браузере. – vjdhama

-2

попробовать <div class="aboutMe">aboutMe</div>

иногда "" являются важными

источник

2014-12-24 22:55:01 TheKangaroo

Они не важны, когда значение атрибута состоит только из букв. – Quentin

Я не думаю, что пунктуация - это то, что отбрасывает. Код работает нормально, его реализация JQuery просто в HTML-лист. – Walker

, если можно использовать последнюю версию jquery, вы можете использовать это: '' Я протестировал его. то это работает. – TheKangaroo

http://jsfiddle.net/b63nLkfa/1/

.aboutMe{ 
    background-color: #CCCCCC; 
    height:250px; 
    width:200px; 
    color: white; 
    font-size:32px; 
} 
.bodyAmendment{ 
    width:100px; 
}

Ваша проблема о приоритетах CSS. Давайте проверим мою скрипку и применим инструмент, как firebug. Всегда.

источник

2014-12-24 22:56:52 damian004

Ive рассказал это большинству других людей. Кодирование звука (для всех, что я вижу). Проблема связана с включением JQuery в HTML. Я не думаю, что я правильно добавляю JQuery. – Walker

Оба aboutMe и bodyAmendment имеют определенную ширину. toggleClass() добавляет класс, поэтому вы завершаетесь <div class="aboutMe bodyAmendment">. width: 200px «выигрывает», поэтому он кажется, что код ничего не делает. Попробуйте

.bodyAmendment{ 
    width: 100px !important; 
}

или какая-либо другая комбо, чтобы вы не определяли одно и то же свойство в обоих классах.

источник

2014-12-24 22:59:36

Вы пренебрегли добавлением в jQuery, когда вы создали свою скрипку. Это означает, что ваш код не стрелял. Кроме того, при работе с CSS последнее добавленное правило имеет преимущество, независимо от того, когда был добавлен класс.

.test2 { 
    width: 100px; 
    background-color: #F00; 
} 

.test1 { 
    width: 200px; 
    background-color: #F00; 
}

HTML

<div class="test1">This is 200px</div> 
<div class="test1 test2">This is also 200px!</div> 
<div class="test2">This is 100px</div>

В CSS "каскады" вниз по документу, каждое правило, которое приходит позже преобладает над последним.

http://jsfiddle.net/b63nLkfa/21/

источник

2014-12-24 23:10:34

-1

Я обычно использую .php и использовать

<? include "includes/js.php"; ?>

, который в одном этом файле у меня есть все мои сценарий вызывает. Сделать его намного проще для обновления всего сайта из одного файла.

источник

2014-12-24 23:14:43

использование .....? Он не появился. – Walker

__O__ Это просто классика. – vjdhama

Включая CSS, jQuery и HTML все в один .html

ответ

Смежные вопросы