Как открывать вкладку в новом окне?

Question

[Михаил Миргородский]

Добрый день,
Есть код :

<div class="container">
<div class="row">
<div class="uk-panel col-xl-2 col-lg-4 col-md-4 col-6" onclick="location.href='/okna';">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover "><img alt="ОКНА" src="media/widgetkit/icon_okna-349f469ed987244dda27ec14f10fb941.png" width="100" height="100" /> <img class=" uk-overlay-panel uk-overlay-image" alt="ОКНА" src="media/widgetkit/cvet_okna-6e04448160c2590d7feb8f57b0bc782e.png" width="100" height="100" />
<div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"> </div>
</figure>
</div>
<div class="uk-panel-title uk-margin-bottom-remove">ОКНА</div>
</div>
<div class="uk-panel col-xl-2 col-lg-4 col-md-4 col-6" onclick="location.href='/dveri';">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover "><img alt="ДВЕРИ" src="media/widgetkit/icon_dveri-ff15563210dba781d6b8d5e284858229.png" width="100" height="100" /> <img class=" uk-overlay-panel uk-overlay-image" alt="ДВЕРИ" src="media/widgetkit/cvet_dver-de947d606fdf587635668dfd7d31ec5c.png" width="100" height="100" />
<div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"> </div>
</figure>
</div>
<div class="uk-panel-title uk-margin-bottom-remove">ДВЕРИ</div>
</div>
<div class="uk-panel col-xl-2 col-lg-4 col-md-4 col-6" onclick="location.href='/vhodnye-gruppy';">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover "><img alt="ВХОДНЫЕ ГРУППЫ" src="media/widgetkit/icon_vhodnie_gruppi-4bfce28bc79d18f84132e1f17dc71acd.png" width="100" height="100" /> <img class=" uk-overlay-panel uk-overlay-image" alt="ВХОДНЫЕ ГРУППЫ" src="media/widgetkit/cvet_vhodnye_gruppy-2286623c97a38a0d2f2d811ab074d7ea.png" width="100" height="100" />
<div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"> </div>
</figure>
</div>
<div class="uk-panel-title uk-margin-bottom-remove">ВХОДНЫЕ ГРУППЫ</div>
</div>
<div class="uk-panel col-xl-2 col-lg-4 col-md-4 col-6" onclick="location.href='/peregorodki';">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover "><img alt="ПЕРЕГОРОДКИ" src="media/widgetkit/icon_peregorodki-1d051ea418cad5a438b0e63699dc3416.png" width="100" height="100" /> <img class=" uk-overlay-panel uk-overlay-image" alt="ПЕРЕГОРОДКИ" src="media/widgetkit/cvet_ofisnaya_peregorodka-89063888696319346175cbbc00cf0708.png" width="100" height="100" />
<div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"> </div>
</figure>
</div>
<div class="uk-panel-title uk-margin-bottom-remove">ПЕРЕГОРОДКИ</div>
</div>
<div class="uk-panel col-xl-2 col-lg-4 col-md-4 col-6" onclick="location.href='/osteklenie';">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover "><img alt="Остекление" src="media/widgetkit/icon_osteklenie-1dab42910f5e061d841ac64738d317b2.png" width="100" height="100" /> <img class=" uk-overlay-panel uk-overlay-image" alt="Остекление" src="media/widgetkit/cvet_osteklenie-7c0f470653d3d3344ffc448e2823ffd3.png" width="100" height="100" />
<div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"> </div>
</figure>
</div>
<div class="uk-panel-title uk-margin-bottom-remove">ОСТЕКЛЕНИЕ</div>
</div>
<div class="uk-panel col-xl-2 col-lg-4 col-md-4 col-6" onclick="location.href='/svetoprozrachnye-konstrukcii';">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover "><img alt="ИНОЕ" src="media/widgetkit/icon_inoe-bb1e5eb5a32ec05abd1b8b084650a995.png" width="100" height="100" /> <img class=" uk-overlay-panel uk-overlay-image" alt="ИНОЕ" src="media/widgetkit/cvet_inoe-0d020c32b573e6bd2d4dbad14cd04fd4.png" width="100" height="100" />
<div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"> </div>
</figure>
</div>
<div class="uk-panel-title uk-margin-bottom-remove">ИНОЕ</div>
</div>
</div>
</div>

Не открывается в новой вкладке при нажатии на среднюю кнопку, так же нет пункта открыть в новой владке если вывести меню правой кнопкой мыши.
Как поправить подскажите пожалуйста.

Comments

[FanatPHP]

и при чем здеь РНР, я стесняюсь спросить?

Answer 1

[Пашенька]

Изучить HTML. Атрибут target, отвечающий за открытие ссылки в новом окне, принадлежит тегу a.

Comments

[Михаил Миргородский]

Мне не нужно что бы ссылка всегда открывалась в новом окне, мне надо что бы она была как обычная ссылка, при левом клике в этой же вкладке, при центральной кнопке в новой вкладке ... И именно весь див должен делать это действие, а не только картинка или текст под ней ....

[Rsa97]

Михаил Миргородский, Ну значит весь div и помещайте внутрь тэга a.

[Михаил Миргородский]

Rsa97,

<a href="/okna"><div class="uk-panel col-xl-2 col-lg-4 col-md-4 col-6"><div class="uk-panel-teaser"><figure class="uk-overlay uk-overlay-hover "><img alt="ОКНА" src="/media/widgetkit/icon_okna-349f469ed987244dda27ec14f10fb941.png" width="100" height="100"><img class=" uk-overlay-panel uk-overlay-image" alt="ОКНА" src="/media/widgetkit/cvet_okna-6e04448160c2590d7feb8f57b0bc782e.png" width="100" height="100"><div class="uk-overlay-panel uk-overlay-background uk-overlay-fade">&nbsp;</div></figure></div><div class="uk-panel-title uk-margin-bottom-remove">ОКНА</div></div></a>

В таком случае не отображается картинка !

[Пашенька]

Михаил Миргородский, div и a - элементы разных типов. a - строчный, div - блочный. Для начала приведите а к блочному типу: a { display: block; } - только не так, разумеется, а дав ему специфичный класс.
Кричать восклицательными знаками, кстати, вовсе не обязательно.

[Rsa97]

Михаил Миргородский,

Answer 2

[Vladislav]

У тебя на событие onclick висит location.
Переделай на
window.open('http://example.com');

Location меняет url текущей вкладки.
a
window.open открывает новую вкладку с указанным url

С тегом a:
<a href="#" target="_blank">Открой меня</a>

target="_blank" - Указывает что ссылка откроется в новом окне

Comments

[Михаил Миргородский]

Спасибо, но всё равно немножко не то, мне надо, что бы ссылка открывалась в этом же окне если как обычно левой кнопкой мыши и в новом если средней... ну как обычная ссылка

[Vladislav]

Михаил Миргородский, Тогда это тебе нужно использовать тэг
<a href="#" target="_blank">Открой меня</a>

[Vladislav]

Михаил Миргородский, Чтобы через ПКМ открывалась в новой вкладке, просто таргет убери.