修改

Question

我试图在没有链接的情况下点击div。单击只是将会话变量设置为div的id。我的问题是，span，h3和p部分从div中单独注册。这样就抛弃了造型和行为编辑：我可能没有让我的问题足够清楚：设置会话变量不是问题，我只是没有显示js代码。当我点击div中未被文本覆盖的任何地方时它工作正常。但是，当我单击有文本的地方时，单击文本而不是div。由于文本没有id，因此会话变量没有正确设置，并且我的＆＃34;活动＆＃34; class被应用于文本而不是div。

div代码：

  <div class="col-md-6 col-sm-6 col-xs-12">
    <div class="panel panel-default">
      <div class="task-option-button panel-body" id="create_your_own">
        <span class="glyphicon glyphicon-list-alt"></span>
        <h3>Individual Task</h3>
        <p>Create a new task without a template</p>
      </div>
    </div>
  </div>

CSS

.task-option-button >span,h3,p {
    z-index:1;
}
.task-option-button{
    text-decoration:none;
    text-align: center;
    padding:10px;
    height:150px;
    width:100%;
    background-color:#f5f5f5;
    cursor: pointer;
    cursor: hand;
    z-index:10;

}

.task-option-button:hover {
    text-decoration:none;
    border-bottom:5px solid #D8853B;
    background-color:#FFF;
}

我正在玩z-index，但无济于事。更糟糕的是，在另一页上，这种结构运作完美无缺。一个可点击的面板，里面有不同的元素，我点击的任何地方我单击面板，而不是文本。有没有人有想法？

Answer 1

修改

我制作了一个符合预期的编解码器;如果出现错误，请检查您必须查看的内容。

CODEPEN EXAMPLE

为什么这不起作用？不确定你是如何设置会话变量的，但我会使用cookie。

var createCookie = function(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

$('#create_your_own').on('click', function() {
    var id = $(this).attr(id);
    createCookie('divID', id, 10);
});

使div可点击，但不在文本里面

1 个答案:

修改

CODEPEN EXAMPLE