game802

Код не проверял, но работать должен

<a href="#" class="btn" data-active="block-item-1">Блок #1</a>
<a href="#" class="btn" data-active="block-item-2">Блок #2</a>
<a href="#" class="btn" data-active="block-item-3">Блок #3</a>

<div class="block-item block-item-1">
	Текст блока #1
</div>

<div class="block-item block-item-2">
	Текст блока #2
</div>

<div class="block-item block-item-3">
	Текст блока #3
</div>

$('.btn').click(function(event) {
	event.preventDefault();

	var blocks = $('.block-item'), 
		active = $(this).data('active');

	blocks.fadeOut(0);
	$('.block-item.'+active).fadeIn(400);
});

$(".tButton").click(function(){
        var showBlockClass = $(this).data("price"); 
        $(".bg3").fadeOut(0);
        $("."+showBlockClass).fadeIn(400);
});

Да все же просто. Делаешь для каждого из этих блоков общий класс с display: block;
А им всем делаешь display: none;
При клике на первую кнопку, добавляешь первому блоку этот класс, при клике на вторую, второму блоку этот класс.
И перед добавление класса, у всех трех блоков удаляешь этот класс.

Коротко
Карта развития Web Разработчика

Демагогия
Не переживайте, не все сразу. Есть вещи до которых можно дойти только опытом и практикой. Это касается всех программистов в целом. Касательно веба, тут очень много упирается в то, каким именно специалистом вы хотите себя видеть в будущем. Есть фулстак - когда человек знает большую часть технологий их связку, но всегда будет ощущать недостаток тонкостей на хай левеле. В то же время специалист заточенный под определенные задачи будет лучше фулстака, но так же будет нуждаться в том же фулстаке, что бы объеденить.

Живой пример: Есть толковый фронтендер(или бекендер по JS) пишет морду сайта на JS Фреймворке. Есть гуру бэкенда пишет API сайта. В случае с фулстаком(образно) он пишет обе задачи сам, но заведомо понятно, что он пишет это дольше и не факт что по последнему слову будет сделано.

Что нужно для развития дальше:
- Читайте блоги зарубежных программистов, они делают отличные архитектуры как в самом коде, так и решения в DB.
- Фреймворки PHP и JS - чем больше их будет тем лучше. Все они ускоряют разработку. Все чаты, соц авторизации, регистрации,и прочие первоочередные задачи давно уже написаны. Вы можете концентрироваться на более важных задачах.
- ООП тут очень спорный вопрос, на определенных этапах разработки оно решает, но когда этот уровень появляется, чаще всего прибегают к другому языку программирования и переписывают проект в угоду скорости (С++, Java, Python). Понимать нужно, поскольку фреймворки построены на этих парадигмах, но самостоятельно придумывать вам гибкие решения вряд ли придется(по крайней мере до Senior-а точно).
- Не изобретайте велосипеды. Разбирайтесь в чужом коде(Этот навык очень ценен после "решить/найти решение любую задачу"). Любой магазин чаще всего будет написан в лучшем случае на фреймворке, в худшем на OpenCart, Woedpress - что просто идиотизм, это блоговая система БЛОГОВАЯ. из за тренда выкручивают яйца.
- Учить английский и работать не на СНГ, Укр или места постсоветского пространства. Искать фирмы зарубежных филиалов и работать там. Поскольку так или иначе там уже работают профессионалы и знакомы с западным рынком, европейским. Там пишутся интересные проекты и появляются интересные решения.

// ПОЧЕМУ super.model ЗДЕСЬ undefined

Потому что Model.prototype не содержит свойства model

Пример:
es2015:

class A {
  constructor() {
     // ...
  }

  method() {
     // ...
  }

  static sMethod() {
    // ...
  }
}

class B extends A {
  constructor(x, y) {
    super(x);
    super.method(y);
  }
}

То же самое, на es5:

function A() {
  if(!(this instanceof A)) {
     throw new Error('Class constructor A cannot be invoked without \'new\'');
  }
  // ...
}
A.prototype.constructor = A;
A.prototype.method = function method() {
  // ...
};
A.sMethod = function sMethod() {
  // ...
};

function B(x, y) {
  if(!(this instanceof B)) {
     throw new Error('Class constructor B cannot be invoked without \'new\'');
  }
  A.call(this, x);
  A.prototype.method.call(this, y);
}
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
B.sMethod = A.sMethod; //static методы тоже наследуются

Это собственно реализация того что сказал Symphony : jsfiddle

JS-ом проходите по всем путям и вставляйте активный path в конце, а иначе эффекта «приподнятия» не будет.

Это фильтр тени:

<svg>
  <filter id="dropShadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
      <feOffset dx="10" dy="10" />
      <feMerge>
          <feMergeNode />
          <feMergeNode in="SourceGraphic" />
      </feMerge>
  </filter>
</svg>

Это css при :hover:

svg path:hover {
  transform: translate(-10px,-10px);
  filter: url(#dropShadow);
  transition: transform .1s;
}

Забей, это тупая шутка, я таких называю дрочеры, куча понтов, давайте все на нативном ага удачи, проект чуть больше магазина, попробуй напиши на чистом js.

1. Самое главное во фрилансе - соблюдать сроки, на сегодня это главная проблема. Если вы сможете всегда делать работу в срок (или раньше) - к вам потянутся заказчики.
2. Постоянная работа ой как нужна, особенно на первое время.
3. Как опытного, но супер дешевого и быстрого специалиста) Демпинговать по началу.
4. Можно, но лишь чуть чуть. Нормальная торговля начнется с опытом и с постоянными заказчиками.
5. Дизайн это не обязательно, да и не научишься этому так просто.

Чего не хватает?
1. Прежде всего вам нужно учить JavaScript + jQuery и быть Фронтенд-разработчиком, а не просто верстальщиком.
2. Помните, самые жирные заказы - заказы под ключ. Так что у вас должны быть контакты дизайнеров и бэкенд-программистов чтобы перепоручить часть работ. Часть из этого вы можете выучить сами, например PHP+Wordpress, это облегчит вашу работу и упростит поиск заказов.

/*
----------------------------------------------------------------------------------------------------------- 
вынести эти функции в отдельный файл (например content.js) и подключить в index.php
-----------------------------------------------------------------------------------------------------------
*/
function load_content(cname)
{
 // ваш код
}
function SetContentHandlers()
{
 // здесь jquery обработчики  из блока <script>...</script> 
}

// ---------------------------
// index.php
// ---------------------------
<script>
$(document).ready(function() 
{
 SetContentHandlers()
});
</script>

Ознакомьтесь: clusterize
Возможно это то, что Вам нужно

"caret_style": "solid"
www.sublimetext.ru/documentation/preferences/caret...

Kaspersky Safe Kids
www.kaspersky.ru/safe-kids