Question

超级css noob在这里。

我正在使用一个名为visual composer的wordpress插件，它允许您使用行ID或类名称命名行（它就像一个块元素）。我正试着这样做当用户将鼠标悬停在这一行上并点击它时，这次点击只会将它们带到我网站的另一个页面。

它允许一个区域拥有我可以与标签关联的这个类或ID的css，但是在搜索之后我要么搜索错误的东西，要么找不到它但是我正在寻找css那个允许我这样做！

Answer 1

你不能只使用css链接到其他页面，你需要javascript。例如，班级名称为linkPage：

＆＃13;

document.getElementsByClassName('linkPage')[0].onclick = function(){
   location.href= 'some url...'
}

＆＃13;

<div class="linkPage">linkPage</div>

＆＃13;

Answer 2

您需要在主题中注入一些JS，以便在window上侦听具有所需ID或类的点击，然后调用window.location.href = URL或其他类似的东西。

CSS无法导致浏览器位置更改。

Answer 3

<强> CSS
正如其名称所述，CSS（层叠样式表）为您希望设置样式的HTML页面定义了一组规则和属性（诸如颜色，大小，asf之类的东西）;和用户交互（即使是指向URL的次要）也不属于其范围。

<强>基本
谈论像WordPress这样的巨人和像Visual Composer这样的强大插件，总能找到极其古老而标准的功能，如链接/图像/表格asf。您可以查看可视化作曲家的“原始HTML”功能（https://vc.wpbakery.com/features/content-elements/）以及常规“a”标记（http://www.w3schools.com/tags/tag_a.asp）。

<强>可编辑
询问如何通过编辑CSS文件来实现页面链接，那么您也可以查看插件的不同可编辑内容类型 - 例如HTML或JS。

点击表格行
使表格单元/行可点击的最佳方法是使用JavaScript;见Adding an onclick event to a table row

Answer 4

使用jQuery和Javascript（更简便的方法）进行链接：

$(".link").click(function(){
   window.location.replace('https://www.example.com');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>

使用纯Javascript（更严格的方法）进行链接：

x = document.querySelectorAll('.link').length;
y = 1;

while (x => y) {
  document.getElementsByClassName("link")[y].onclick = function() {
    window.location.replace("https://www.example.com");
  };
  y++;
}

<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>

如何创建一个css类，使元素链接到另一个页面

4 个答案: