Question

    <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）就是这样做的。（显然我现在不怎么......）

Answer 1

如果您在搜索了某些结果后检查了网页的来源，您会发现您希望的方框是“可点击的”（而不是“可选择的”，我想您想说的是可点击的）一个'gs-result'类

因此，在您的javascript中，您应该执行以下操作：

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

这将实现我相信你希望实现的目标。您还可以在'.gs-result'中添加css样式，使鼠标光标看起来像一只手，向用户表明它是可点击的。

Answer 2

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

然后，您可以通过$（'。selectedBlock'）;

访问您选择的块

使整个块可选

2 个答案: