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

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

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

Answer 3

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

a.tab { display:block; } 

И затем также установить другие соответствующие атрибуты, такие как ширина/высота, цвет фона и т. д.

Тогда вместо того, чтобы ваш HTML выглядит следующим образом:

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

Answer 4

Вместо того, чтобы использовать < DIV/> тег, то почему бы не использовать < а/> с соответствующим стилем, чтобы соответствовать тому, что в настоящее время применяется к < DIV/>? Таким образом, вы можете использовать атрибут href привязки, а не прибегать к JavaScript, чтобы направить пользователя.

Answer 5

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

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

сделать ваши 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 8

PPS: короткий ответ был, вы можете включить тег A, чтобы отобразить «блок», и добавить любое дополнение, и это дополнение будет захватывать клики.Плавающий элемент (float: left, float: right) является неявным «display: block». Элемент «inline» (например, 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; } 

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

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

Answer 9

Есть два способа достижения этой

встроенный Li + в и поплавка Li + Блок А

summariezed здесь

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