锚标记 <a> 不是可点击的 HTML答案

【问题标题】：achor tag <a> is not clickable HTML锚标记 <a> 不是可点击的 HTML
【发布时间】：2020-06-08 12:04:51
【问题描述】：

第一个月的星期六的锚标记不起作用，我不知道为什么。我试图弄清楚为什么显示的第一个月的星期六按钮不可点击。两个月中的所有其他日子都是可点击的。我的想法是我希望将日期重定向到一个不同的类，该类为单击的日期呈现类。这个系统已经在https://app.aerafrica.com 上线，这是一个非常烦人的错误，它会阻止一个月中特定日期的预订。

[![二月星期六被禁用][2]][2]

//include ('../configs/DbConnect.php');
$maindate=date('Y-m-d');
$dayofweek=date('w', strtotime($maindate));
$maindate1=date('Y-m-d', strtotime($maindate));
switch ($dayofweek){
    case 0:
        $dayofweek=7;
        break;
    default:
        $dayofweek;

}


function showMonth($month, $year)
{
    $date = mktime(12, 0, 0, $month, 1, $year);
    $daysInMonth = date("t", $date);
    // calculate the position of the first day in the calendar (sunday = 1st column, etc)
    $offset = date("w", $date);
    $rows = 1;

    echo "<h4>" . date("F Y", $date) . "</h4>\n";

    echo "<table class='table table-bordered' border=\"1\">\n";
    echo "\t<tr><th>Su</th><th>M</th><th>Tu</th><th>W</th><th>Th</th><th>F</th><th>Sa</th></tr>";
    echo "\n\t<tr>";

    for($i = 1; $i <= $offset; $i++)
    {
        echo "<td style='font-size: small'></td>";
    }

    for($day = 1; $day <= $daysInMonth; $day++)
    {
        if( ($day + $offset - 1) % 7 == 0 && $day != 1)
        {
            echo "</tr>\n\t<tr>";
            $rows++;
        }

        echo "<td> <a class='btn-outline-secondary' href='classes.php?day=$day-$month'>$day</a> </td>";
    }


    while( ($day + $offset) <= $rows * 7)
    {
        echo "<td></td>";
        $day++;
    }

    echo "</tr>\n";
    echo "</table>\n";

}
$mon=date('m');

$year=date('Y');
//$db=new DbConnect();
//$classesquery = $db->querydb("SELECT c.id as id, cp.product_name as classname,cp.description as details, p.name as coachname,c.dayscheduled as day ,cp.class_requirement as class_requirements 
  //   ,(c.spotsvailable-c.spots_used ) as spots, c.timefrom as starttime ,loc.name as location_name ,c.duration as classduration , c.datefrom as datefrom from tbl_classes c  join tbl_locations loc on loc.id=c.locationid 
    //join tbl_persons p on p.id=c.coachid join tbl_products cp on cp.id = c.productid where c.is_active=0 and c.spots_used < c.spotsvailable and c.dayscheduled='$dayofweek' and c.dateto>= '$maindate1' 
//order by c.timefrom asc ");
?>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>AER Portal</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


    <!-- Custom styles for this template -->
    <link href="css/heroic-features.css" rel="stylesheet">

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="index.php">Class Schedule</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="https://aerafrica.com">Home</a>
                </li>

                <li class="nav-item active">
                    <a class="nav-link" href="#">Schedule
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../login.php">Login</a>
                </li>
                <!--li- class="nav-item">
                  <a class="nav-link" href="../register.php">Register</a>
                </li-->
            </ul>
        </div>
    </div>
</nav>

<!-- Page Content -->
<div class="container">
    <br>
    <div class="row">




        <div class="col-sm-3"   style="text-align: center">
            <div><?php showMonth($mon,$year)?> </div>

        </div>

        <div class="col-sm-3"></div>
        <div class="col-sm-3"   style="text-align: center">
            <div><?php showMonth($mon+1,$year)?></div>

        </div>



    </div>
    <table class="table table-striped table-bordered table-list">
        <thead>


        </tbody>
    </table>
    <!-- /.container -->
</div>
<!-- Footer -->
<footer class="py-5 bg-dark">
    <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; AER Africa <?php echo date('Y')?></p>
    </div>
    <!-- /.container -->
</footer>

<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>


</body>

</html>
<style>
    .center {
        margin-top:50px;
    }

    .modal-header {
        padding-bottom: 5px;
    }

    .modal-footer {
        padding: 0;
    }

    .modal-footer .btn-group button {
        height:40px;
        border-top-left-radius : 0;
        border-top-right-radius : 0;
        border: none;
        border-right: 1px solid #ddd;
    }

    .modal-footer .btn-group:last-child > button {
        border-right: 0;
    }
    .main-parallax {
        z-index: 1;
    }
</style>```


  [1]: https://i.stack.imgur.com/mLRdF.png
  [2]: https://i.stack.imgur.com/t3rsA.png

【问题讨论】：

你有一个很大的空 div 位于日历的那部分顶部并阻止点击。我无法单击左侧日历上的任何星期六，但是当我删除那个大的空 div 时，它工作正常。这也与 PHP 或 jQuery 无关。
将鼠标悬停在链接上，右键单击并检查。
@j08691 到底在哪里，我为此苦苦挣扎了一周。
您有一行包含您的日历。类col-sm-3 有三个div。尝试将它们全部更改为col-sm-4。 Bootstrap 网格基于 12 列，而您只使用了 9 列，这将所有内容都推得太近了。
@j08691 谢谢这已经奏效了。非常感谢，

标签： php jquery html css bootstrap-4

【解决方案1】：

您有一行包含您的日历。类col-sm-3 有三个div。尝试将它们全部更改为col-sm-4。 Bootstrap 网格基于 12 列，而您只使用了 9 列，这会将所有内容推得太近。

【讨论】：