Question

基本上我有三个DIV，每个DIV都有一个内联的OnClick事件处理程序。这些OnClick事件将用户引导到DIV正在讨论的任何页面。但是，一旦所有三个DIV都使用其onclick事件和单独的URL进行编码，则最常用的onclick事件会将所有三个DIV指向第一个URL。如果我从最顶层的DIV中删除代码，则第二个DIV将指向第二个DIV正确页面，但第三个DIV也将指向该页面。

<div class="column_one" style="margin-top:25px;" onclick="location.href='/general-trades-contractor.php';">
<a href="/general-trades-contractor.php"><div class="column_one_image"></div></a>
<div class="white" class="row1"><h1> General Contractor </h1>
    <p class="left"></p><br><a href="/general-trades-contractor.php"><span>more...</span>

<div class="column_two" style="margin-top:25px;" onclick="location.href='/specialty-contractor.php';">
<a href="/specialty-contractor.php"><div class="column_two_image"></div></a>
<div class="white" class="row1"><h1 style="padding-left:20px;"> Specialty Contractor </h1>
    <p class="right"></p><br><a href="/specialty-contractor.php"><span style="padding-left:20px;">more...</span></a>

<div class="column_three" style="margin-top:25px;" onclick="location.href='/firestop-contractor.php';">
<a href="/firestop-contractor.php"><div class="column_three_image"></div></a>
<div class="white" class="row1"><h1> Firestopping Contractor </h1>
    <p class="left"></p><br><a href="/firestop-contractor.php"><span>more...</span></a>

以及相关的CSS。

.column_one
{   
display:block;
float:left;    
background-color:rgba(236,236,236,0.83);
height:250px;
width:940px;    
}

.column_two
{   
display:block;
float:left;    
background-color:rgba(236,236,236,0.83);
height:250px;
width:940px;    
}

.column_three
{   
display:block;
float:left;    
background-color:rgba(236,236,236,0.83);
height:250px;
width:940px;    
}

Answer 1

您的HTML格式不正确，您错过了每个div的结束</div>标记以及第二个链接的结束</a>标记。

如果您通过美化器运行html，则更容易看到：

<div class="column_one" style="margin-top:25px;" onclick="location.href='/general-trades-contractor.php';">
    <a href="/general-trades-contractor.php">
        <div class="column_one_image"></div>
    </a>
    <div class="white" class="row1">
        <h1>General Contractor</h1>
        <p class="left"></p>
        <br>
        <a href="/general-trades-contractor.php">
            <span>more...</span>
    </div>

    <div class="column_two" style="margin-top:25px;" onclick="location.href='/specialty-contractor.php';">
        <a href="/specialty-contractor.php">
            <div class="column_two_image"></div>
        </a>
        <div class="white" class="row1">
            <h1 style="padding-left:20px;">Specialty Contractor</h1>
            <p class="right"></p>
            <br>
            <a href="/specialty-contractor.php">
                <span style="padding-left:20px;">more...</span>
            </a>
        </div>

        <div class="column_three" style="margin-top:25px;" onclick="location.href='/firestop-contractor.php';">
            <a href="/firestop-contractor.php">
                <div class="column_three_image"></div>
            </a>
            <div class="white" class="row1">
                <h1>Firestopping Contractor</h1>
                <p class="left"></p>
                <br>
                <a href="/firestop-contractor.php">
                    <span>more...</span>
                </a>
            </div>

Answer 2

您似乎缺少结束标记。像这样：

<div class="column_one" style="margin-top:25px;" onclick="location.href='/general-trades-contractor.php';">
    <a href="/general-trades-contractor.php"><div class="column_one_image"></div></a>
    <div class="white" class="row1">
        <h1> General Contractor </h1>
        <p class="left"></p><br><a href="/general-trades-contractor.php"><span>more...</span></a>
    </div>
</div>

应该有效。你错过了最后一个</a></div></div>，因此每个后续的div都是上面div的孩子，因此第一个div包括第二个，第二个是第三个的父。因此，当您单击div时，实际上会触发它的父单击。

当然，您需要重复三次，每次<div>添加</a></div></div>以关闭元素。

DIV中的OnClick事件处理程序（First OnClick会影响所有DIV）

2 个答案: