点击span标签中的文字如何触发一个链接，若用jquery的方法来用的话，又该如何做?

Posted 2023-05-10

1、用一对a标签来包裹span里的标签，就可以添加你想要的链接（推荐）
2、如果用jQuery的话：location.href="XXX.html";这个语法就可以了（不推荐） 参考技术A 超链接是不能被脚本直接触发的，除非你用其它取巧的方式去实现 。 参考技术B $ (function ()

$ ('span').click (function ()

$(window.location).prop('href', 'x.html');
)
)本回答被提问者和网友采纳

超链接文字隐藏

㈠方法一：利用span元素

举例：在设置网页头部的logo时，点击图片会自动跳转到一个页面，这是利用了超链接加背景图片做到的

          但是，仔细观看就会发现没有超链接的文字部分，被隐藏了，这是如何做到的呢？

 

方法：我们可以采用在超链接中加入一个span元素，设置span的样式，display：none；进行隐藏。

 

代码如下：

<!--html代码部分-->
<header class="header">
   <div class="logo left">
                <h1>
                    <a href="">
                        <span>豆瓣</span>
                    </a>
                </h1>
    </div>
</header>

<!--css代码部分-->
 .header .logo a span{
     display:none;
 }

 

效果图：

 

㈡方法二：设置超链接的样式

⑴首先：把超链接的高度设置为0；

⑵接着：把内边距：padding-top设置为logo背景图片的高度（把文字挤下去了）

★解释：当我们审查元素时，会看到，超链接只有padding（内边距），同时因为背景图是覆盖边框的，在padding部分仍然可以看到背景，但是高度为0，也就是它的内容区域为0，这样一设置padding的值，文字就被挤下去了。

⑶最后：溢出隐藏，把挤下来的文字隐藏，设置：overflow：hidden

 

代码如下：

 .header .logo a{
     width: 154px;
     height: 0px;
     overflow: hidden;
     padding-top: 30px;
     display:block;
     background: url("img/logo_db.png") no-repeat ;
 }

 

效果图：