Создание целой вкладки кликабельной

Question

Я делаю шаблон, который во многом опирается на интерфейс с вкладками, и чтобы сделать его немного более интуитивным, я хочу убедиться, что пользователь может щелкнуть в любом месте вкладки, чтобы активировать его, вместо того, чтобы нажимать на текст внутри вкладки. Чтобы достичь этого, я сейчас делаю это:

<div class="tab" onclick="javascript:window.location='http://example.com';">
    tab text
</div>

для всех вкладок, которые я создаю. У кого-нибудь есть более эффективный способ сделать это, которым он хотел бы поделиться со мной / сообществом?

Answer 1

Было бы более доступно, если бы вы сделали это:

<div class="tab">
    <a href="..." style="display: block;">tab text</a>
</div>

Установка <a> на block позволяет ему заполнить ширину, и вы можете задать ему высоту, отступы и т. Д., Как <div>. Вы могли бы даже покончить с <div> полностью.

<a href="..." class="tab" style="display: block;">tab text</a>

Конечно, вы бы добавили display: block; к .tab {}, но вы поняли идею.

Answer 2

С точки зрения семантики и совместимости лучше изменить тег с помощью CSS, чтобы сделать это, вы можете попробовать что-то вроде этого:

a.tab { display:block; }

А затем для этого также установите другие соответствующие атрибуты, такие как ширина / высота, цвет фона и т. Д.

Тогда вместо этого ваш HTML выглядит так:

<a class="tab" href="http://example.com">tab text</a>

Answer 3

PPS: короткий ответ был, вы можете повернуть тег A, чтобы отобразить режим «блока», и добавить любые отступы, и это заполнение будет ловить щелчки. Плавающий элемент (float: left, float: right) является неявным «display: block». «Встроенный» элемент (такой как SPAN) также использует отступы, чтобы определить область, которая получает фоновое изображение; но не влияя на макет.

Самый простой способ сделать это будет примерно так:

ul.tabs, ul.tabs li { float:left; margin:0; padding:0; list-style:none; }
ul.tabs li a { float:left; padding:4px 10px 4px; border:1px solid blue; border-bottom:none; margin-right:4px; }
.clear { clear:both; /* add width:100%; overflow:hidden; for IE6 pos */ }

<ul class="tabs">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    ...etc...
</ul>
<div class="clear"></div>

Если вы используете одинаковую ширину для каждой вкладки (в зависимости от самого длинного текста в ней), то вы даже можете использовать одно изображение фона gif:

ul.tabs li a { /* same above + */ background:url(tab-bg.gif) no-repeat 50% 0; text-align:center; width:120px; }

Более продвинутым, классическим способом создания вкладок, которые адаптируются к переменным размерам шрифтов и могут использовать пользовательские изображения для углов и заливки, является «Раздвижные двери»:

http://www.alistapart.com/articles/slidingdoors/

Answer 4

Создайте свои a теги для элементов блочного уровня и вместо этого поместите вкладку в закладку. Например, если у вас есть ...

<style type="text/css">
    div.tab {
        float: left;
        padding: 10px;
    }
</style>

<div class="tab"><a href="http://example.com">tab text</a></div>

... затем измените его на это ...

<style type="text/css">
    div.tab {
        float: left;
        padding: 0;
    }

    div.tab a {
        display: block;
        padding: 10px;
    }
</style>

<div class="tab"><a href="http://example.com">tab text</a></div>

Это приведет к тому, что ссылка займет все «тело» вкладки, поэтому вы можете щелкнуть в любом месте на ней.

Answer 5

Есть две техники для достижения этой цели

встроенный li + a а также float li + block a

здесь обобщено

http://www.pagecolumn.com/webparts/making_tabs_with_CSS.htm

Answer 6

как насчет:

<script type="text/javascript" src="jquery.js">
$(document).ready(function(){
   $(".tab").click(function(event){
     window.location='http://example.com';
   });
 });
</script>

...

<div class="tab">
tab text
</div>

Answer 7

Как уже упоминал Джон Раш, создание функции javascript для набора текста может помочь вам, но также ... не заставляйте меня думать! Если он кликабелен, покажите его курсором: hand in css !!!

Answer 8

Вместо использования тега

, почему бы не использовать с соответствующим стилем, чтобы соответствовать тому, что в настоящее время применяется к

? Таким образом, вы можете использовать атрибут привязки href, а не использовать JavaScript, чтобы направлять пользователя.

Answer 9

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