Question

我有两个HTML文档， home.html 和 courses.html
home.html 有4个链接，每个链接代表（链接） courses.html上的代码（div）的一部分

我想要的内容： 点击 home.html 上的链接并将其重定向到 courses.html <的特定部分时/ em>然后那部分应该发光（可能是盒子阴影）以吸引读者的注意力。 home.html(rough view)

courses.html(roughly showing effect I want)
PS：我只是一个初学者，我只知道HTML，CSS，Javascript，所以如果使用这些语言可以实现这种效果，那么它将会非常棒。如果没有，请让我理解代码。
感谢

Answer 1

您可以在第2页的预期部分使用:target伪类。请注意，锚名称（＃之后的哈希）与目标元素id相同。

该示例适用于单个页面，但该原则也适用于2页或更多页面。

＆＃13;

div:target {
  border: 2px solid pink;
}

＆＃13;

<!-- source page -->
<a href="#section1">Go to 1</a>
<a href="#section2">Go to 2</a>
<a href="#section3">Go to 3</a>
<a href="#section4">Go to 4</a>

<!-- target page -->
<div id="section1">Example 1</div>
<div id="section2">Example 2</div>
<div id="section3">Example 3</div>
<div id="section4">Example 4</div>

＆＃13;

Answer 2

好吧，你可以使用location.hash。将用户重定向到courses.html页面时，重定向到URL中带有哈希参数的URL。例如：/courses.html#link1。

然后，在courses.html页面上，添加以下脚本：

$("#"+location.hash).css('box-shadow', '0 5px 5px #08c1c6');

我正在使用jQuery以提高可读性。它的作用很简单：将box-shadow添加到具有URL哈希参数ID的元素。您应该为要标记的div添加ID属性，然后脚本将根据URL中的#参数添加box-shadow。

代码的Javascript版本：

document.getElementById(location.hash).style.boxShadow = "0 5px 5px #08c1c6";

Answer 3

建立像

这样的链接

<强> home.html的

<a href="courses.html?highlight=something">Go to something</a>

*说你要突出显示一个id = something

的元素

在 courses.html 页面上运行文档上的函数，以便检查是否有任何突出显示。

JQUERY：

$( document ).ready(function() {
    CheckForHighlight();
});

function CheckForHighlight(){
    href = window.location.href;
    values = href.split('?')[1] // Remove the url
    highlight = values.split('=')[1]; // Grab the second parmeter
    $('#'+highlight).addClass('highlightedElem');
    //highlightedElemclass has box shadow or border
}

CSS：

.highlightedElem{
   box-shadow:0px 0px 10px blue;
   border:1px solid blue;
}

Answer 4

如果我理解正确， a：hover 的css框阴影就足够了

这是css部分

a:hover {
  text-decoration: none;
  box-shadow: 2px 2px 2px 2px red;
}

这是html部分

<a href="">for a link 1</a>

a:hover {
  text-decoration: none;
  box-shadow: 2px 2px 2px 2px red;
}

<a href="">for a link 1</a>
<a href="">for a link 2</a>
<a href="">for a link 3</a>
<a href="">for a link 4</a>

通过单击链接突出显示另一页面的元素

4 个答案: