JQuery Tabs的表面不是完全可點擊的

我有一組JQuery的標籤能夠正常工作 - 標籤連接到divs和所有東西。唯一的問題是，除非將鼠標放在標籤的文本上，否則它不會將其識別爲鏈接，而只是作爲「li」的一部分。令人困惑的是，幾乎我見過的每個例子都沒有任何額外的東西可以隨時看到。我幾乎可以肯定，我錯過了一件愚蠢的事情，但我不知道它是什麼。或者我需要添加額外的東西來製作整個「李」？JQuery Tabs的表面不是完全可點擊的

下面的代碼：

<style type="text/css"> 
    body{ 
     font-family: Verdana, Arial, Helvetica, sans-serif; 
     font-size:75%; 
    } 
    .tabs ul{ 
     list-style:none; 
     padding:0px; 
     font-size:14px; 
    } 
    .tabs li{ 
     float:left; 
     padding:.5em 0em; 
     margin:0px .5em 0px 0px; 
     width:120px; 
     background-color:#ccc; 
     text-align:center; 
    } 
    .tabs li a{ 
     color:#666; 
     text-decoration:none; 
    } 
    .tabs li.ui-tabs-selected{ 
     background-color:#999; 
    } 
    .tabs li.ui-tabs-selected a{ 
     color:#000; 
    } 
    .tabs div{ 
     clear:both; 
     background-color:#f0f0f0; 
     margin:0px; 
     padding:.5em 1em; 
    } 
    .ui-tabs-hide{ 
     display:none; 
    } 
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".tabs").tabs(); 
}); 
</script> 
</head> 

<body> 
<div class="tabs"> 
    <ul> 
     <li><a href="#tab1">First Tab</a></li> 
     <li><a href="#tab2">Second Tab</a></li> 
     <li><a href="#tab3">Third Tab</a></li> 
    </ul> 
    <div id="tab1"><p>This is the first tab.</p></div> 
    <div id="tab2"><p>This is the second tab.</p></div> 
    <div id="tab3"><p>This is the third tab.</p></div> 
</div>

來源

2012-10-24 user1583044

添加display:block到您的標籤或鏈接。

來源

2012-10-24 20:22:16 Megayeine

這做到了！謝謝。 – user1583044

你必須改變的a的display屬性，默認情況下它是inline，但你可以把它改成inline-block

.tabs li a{ 
    color:#666; 
    text-decoration:none; 
    display:inline-block; 
}

，你也可能需要調整高度width和height。

An Example。

來源

2012-10-24 20:22:29

關閉 - 但內聯塊導致相同的問題。原來，它只需要一個普通的舊「塊」。 – user1583044

從您的.tabs li規則中刪除float:left，並將width:120px;改爲.tabs li a。

jsFiddle example

來源

2012-10-24 20:26:35 j08691

JQuery Tabs的表面不是完全可點擊的

回答

相關問題