那么问题是什么？

Question

好吧，这次我有一个相当棘手的问题：使HTML表的TR行表现得像一个超链接。：/不幸的是我不能改变HTML的基本结构来使用DIV（由于编码要求 - 这是一个很长的故事）。

那么问题是什么？

基本上，我知道 onclick （JavaScript）或点击（JQuery）会将这些元素链接到我需要的页面，并且我已经实现了这些解决方案成功。但是，我希望他们在用户悬停 时充当超链接，以便用户看到（通过“手”或浏览器中的任何悬停图标）他正在查看链接，可以右键单击并在新窗口中打开。

我知道我可以分别对JavaScript和JQuery使用 onmouseover 和 hover 方法。问题是，我不知道在这些方法中使用什么代码来使它们以我需要的方式工作，而我在Google上的搜索到目前为止一直没有结果。：/

到目前为止我的工作代码

使用HTML和JavaScript

我的HTML：

<tr class = "oneResultat" onclick="DoNav('annonce.php')"> ... </tr>

和JavaScript：

function DoNav(url) { document.location.href = url; }

使用HTML和JQuery

我的HTML：

<tr class = "oneResultat" href = "annonce.php"> ... </tr>

我的JQuery：

jQuery(document).ready(function($) { $(".oneResultat").click(function() { window.document.location = $(this).attr("href"); }); });

Answer 1

您可以将td内容嵌入<a>代码中，也可以种植“透明”内容。 <a>标记没有内容（但地址），它将完全定位并覆盖整个<tr>。看这里： http://jsbin.com/gelezubake/1/edit?html,output

右键单击 - ＆gt; JS可以通过鼠标右键单击和工具提示来打开，可以选择打开新窗口（带参数的window.open）

Answer 2

您可以使用css cursor: pointer;

cursor属性指定指向元素时要显示的光标类型。

.oneResultat {
cursor: pointer;
}

编辑：

对于右键单击上下文菜单我写了js，听取tr上的上下文菜单，并在事件目标（td）上附加一个删除上下文的删除和html重新连接到td。

(function(){
var item, isIntextMenuOpen;

$('[data-href]')
.on('click', function(e){
        window.document.location = $(this).attr('data-href');
})
.on('contextmenu', function(e){
    var href=$(this).attr('data-href');

    item=$(e.target);
    item.wrapInner('<a href="'+href+'">');
    isIntextMenuOpen = true;
});

function hideContextmenu(e){
       if(isIntextMenuOpen ){
          var children = item.children('a'),
          $child = $(children[0]),
          html = $child.html();

           $child.remove();
           item.html(html);

       }

     isIntextMenuOpen = false;
}
$(window).blur(hideContextmenu);

$(document).click(hideContextmenu);
})();

工作jsbin： http://jsbin.com/qovejasuso/1/

Answer 3

在浏览器中获取默认锚点处理的唯一方法是使用锚点！但由于您无法将TR包装在锚中，因此必须将每个TD的内容包装在锚中。如果您的TD在它们之间没有间隙呈现，则效果最佳。

HTML：

<tr class="oneResultat" data-href="annonce.php"> ... </tr>

使用Javascript：

jQuery(document).ready(function($) {
  var $oneTR = $(".oneResultat");
  var href = $oneTR.attr("href");
  var wrap = "<a href='"+href+"'></a>";
  $("tr.oneResultat > td").wrapInner(wrap);
});

可能的CSS使得锚点在TD中显示全宽：

tr.oneResultat > td > a {
  display:block;
  width:100%;
  height:100%;
}

请注意，这会创建由左键单击而非右键单击触发的常规锚点。如果必须使用右键单击，则创建锚点href='#'并在这些锚点上附加click的事件处理程序，然后调用许多jQuery contextmenu插件之一来呈现上下文相关菜单。如果您想要一个示例，请告诉我，但是现在我假设您需要定期左键单击浏览器锚定行为。

Answer 4

你的类oneResultat应该在css文件或样式属性中，如：

<style>
tr.oneResultat {
   text-decoration: underline;
   cursor: pointer;
}

tr.oneResultat:hover {
   color: #0000ee;
}

tr.oneResultat:visited {
   color: #747EBD;
}

</style>

Answer 5

使用具有这些CSS属性的div代替使用表格标签

将 <table> 替换为 <div class="table">
将 <tr> 替换为 <div class="tr">
将 <td> 替换为 <div class="td">


.table {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
}

JavaScript或JQuery使元素表现得像链接 - onmouseover或悬停？

那么问题是什么？

到目前为止我的工作代码

使用HTML和JavaScript

使用HTML和JQuery

5 个答案: