使整个块处于可选状态

问题描述

    <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）是做到这一点的方法。（显然，我现在不知道如何。）

解决方法

如果您在搜索了某些结果之后检查了页面的来源，则会发现您希望的框是“可点击的”（而不是“可选择的”），我想您想说的是可点击）有一个类“ gs-result \” 因此，在您的JavaScript中，您应该执行以下操作：

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

这将实现我相信您希望实现的目标。您还可以在\'。gs-result \'中添加css样式，以使鼠标光标看起来像一只手，以指示用户可单击。 ,

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

然后，您可以通过$（\'。selectedBlock \'）;访问所选块。

可选可选处于整个状态状态状态