使整個塊可選

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Alternate Results Location - Google AJAX Search API Sample</title> 
    <!-- Replace with http://www.google.com/jsapi --> 
    <script src="http://www.google.com/jsapi" type="text/javascript"></script> 
    <script language="Javascript" type="text/javascript">//<![CDATA[ 
     google.load('search', '1'); 
     function OnLoad() { 
      // create a search control 
      var searchControl = new google.search.SearchControl(); 
      // web search, open, alternate root 
      var options = new google.search.SearcherOptions(); 
      options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); 
      options.setRoot(document.getElementById("somewhere_else")); 
      searchControl.addSearcher(new google.search.WebSearch(), options); 
     searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET); 
      var options = new google.search.SearcherOptions(); 
      options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); 
      searchControl.addSearcher(new google.search.VideoSearch(), options); 
      // tell the searcher to draw itself and tell it where to attach 
      searchControl.draw(document.getElementById("search_control")); 
    } 
     google.setOnLoadCallback(OnLoad); 
     //]]> 
     </script> 
    <style type="text/css"> 
    body {font-size:12px;} 
    table {position:relative;margin-left:auto;margin-right:auto;border:solid px grey;} 
    .top {padding-top: 75px;} 
    .gs-result {padding: 6px;border: solid 1px #DCDEE0;background-color: #EDEFF0;} 
    .gs-result:hover { border: solid 1px #B9C3C9;} 
    .gs-text-box {margin-top: 10%;}#search_control { margin: 20px; } 
    </style> 
    </head> 
    <body> 
    <table width="700px"> 
    <tr> 
     <td class="top" valign="top" width="400px"> 
      <div id="somewhere_else"> 
       Loading 
      </div> 
     </td> 
     <td valign="top" width="300px"> 
      <div id="search_control"> 
       Loading... 
      </div> 
     </td> 
    </tr> 
    </table> 
    </body> 
    </html>

如果你在你的瀏覽器中看到這個，你會看到大的塊，如果你把它們放在斜面上，斜紋的邊框會更暗。我想知道是否有一種方法可以選擇整個塊而不是該塊的href。我不認爲這可以用CSS來完成，我認爲JavaScript（更好的jQuery）是實現它的方法。（很明顯，我現在不知道如何..）使整個塊可選

來源

2011-03-21 Youss

如果您在搜索結果後檢查頁面的來源，您會發現您希望的框是'可點擊的'（而不是'可選擇的'，我認爲您想說可點擊的代替）有一類「GS-結果」

因此您在JavaScript中，你應該做這樣的事情：

$('.gs-result').live('click', function() { 
    window.location.href = $(this).find('a.gs-title').attr('href'); 
});

這樣就實現了我認爲要實現。您還可以將'CSS樣式添加到'.gs-result'中，使鼠標光標看起來像一隻手，以向用戶指示它是可點擊的。

來源

2011-06-15 07:07:12

有點晚了，但謝謝:) – Youss 2011-07-20 14:59:50

$(document).ready(function() { 
    $('whichever-divs-you-want-to-select').click(function() { 
     $('div').removeClass('selectedBlock'); 
     $(this).addClass('selectedBlock'); 
    }); 
});

然後，您可以通過$（'。selectedBlock'）訪問您選擇的塊;

來源

2011-03-21 17:09:55 rsplak

這將帶我到（任何）網址.. ?? – Youss 2011-03-21 21:17:56

使整個塊可選

回答

相關問題