Question

我使用物化卡作为我的网页，我的想法是将卡片用作菜单，这样当一个人点击卡片的任何部分时，链接就会打开。但它只能通过点击图像和/或文本来工作，但卡片的任何其他部分都没有。

这是代码：

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:xs="http://www.w3.org/2001/XMLSchema"
                xmlns:wd="urn:com.workday/bsvc"
                xmlns:env="http://schemas.xmlsoap.org/soap/envelope/"
                exclude-result-prefixes="xs wd env"
               version="2.0">

  <xsl:output method="xml" indent="yes"/>

  <xsl:template match="/wd:Worker">    

    <xsl:variable name="today" select="current-date()"/>                 
    <Mydata>          
      <cobra>                           
        <xsl:for-each 
            select="xs:date(/wd:Worker
                            /wd:Worker_Data
                            /wd:Benefit_Enrollment_Data
                            /wd:Health_Care_Data
                            /wd:Health_Care_Period_Data
                            /wd:Health_Care_Coverage_Data
                            /wd:Dependent_Coverage_Data
                            /wd:COBRA_Eligibility_Data
                            /wd:Eligible_Date) 
                    &gt;$today ">                  
          <xsl:value-of select="'TRUE'"/>   
        </xsl:for-each>                 
      </cobra>
    </Mydata> 
  </xsl:template>
</xsl:stylesheet>

我知道上面的代码只适用于图像和文本。但我试图将所有卡片作为像

这样的链接

<div class="col l6 m12 s12">
                <a href="signup.html" target="_blank">
                  <div class="card cardHover">
                 <div class="card-image waves-effect waves-block waves-light">
                   <a href="signup.html" target="_blank"><img class="activator" src="img/test2.jpg"></a>
                 </div>
                 <div class="card-content">
                   <span class="card-title activator text-darken-4"><a href="signup.html" class="black-text" target="_blank">RoboTico</a><i class="material-icons right">build</i></span>
                 </div>
               </div>
                </a>                
            </div>

但它没有用。

Answer 1

尝试在每张卡片上制作一个绝对的href标签，试试这个：

＆＃13;

div.col{position:relative}
.fullcard{position:absolute;
             top:0;
             left:0;
             width:100%;
             height:100%;
             display:inline-block;    
             z-index: 99999;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="col l6 m12 s12">
                  <a href="signup.html" class="fullcard" target="_blank"> </a>
                <a href="signup.html" target="_blank">
                  <div class="card cardHover">
                 <div class="card-image waves-effect waves-block waves-light">
                   <a href="signup.html" target="_blank"><img class="activator" src="http://pixdaus.com/files/items/pics/6/20/107620_cb8da068c718b9e6aa7aa0bcbc68d18f_large.jpg"></a>
                 </div>
                 <div class="card-content">
                   <span class="card-title activator text-darken-4"><a href="signup.html" class="black-text" target="_blank">RoboTico</a><i class="material-icons right">build</i></span>
                 </div>
               </div>
                </a> 
            </div>

＆＃13;

Answer 2

如果您将import com.typesafe.scalalogging._ import scala.language.postfixOps class MyClass extends LazyLogging { def f = Future { // do something that fails throw new Exception("this future fails") } withFailureLogging(logger, "some error message") def g = Future { // do something that fails throw new Exception("this future fails") } withPrintStackTraceOnFailure }设置为样式a然后将所有内容包装在其中 - 您应该可以点击卡片中的任意位置并导航到新链接。您当前必须单击元素的原因是a是内联级别元素并且仅响应它们上的直接交互 - 您需要将其设置为块级元素，从而响应该块内的任何交互。 / p>

我添加了一些样式规则来强调这一点（例如边框和填充），这样做意味着你只需要在每张卡中都有一个display:block。请注意，我没有您的图片 - 所以alt文字显示在这里。

.display-card {
  border: solid 1px #333;

 }

 .nav-link {
  display:block;
  padding:15px
 }

创建卡作为完整链接

2 个答案: