[英]Data target is not working with bootstrap 3
header.php code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html lang="EN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="images/logo.jpg" type="image/x-icon" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<link rel="stylesheet" href="styles/mystyles.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<script src="js/bootstrap.min.js" ></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
導航.php
<div class="navbar navbar-default" id="navbar">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand home" href="#">
<img src="images/ico.JPG" class="hidden-xs" style="height:50px;">
<img src="images/icosmall.png" class="visible-xs" height="50px" width="auto">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle Navigation</span>
<i class="fa fa-align-justify"></i>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search">
<span class="sr-only">Toggle Navigation</span>
<i class="fa fa-search"></i>
</button>
</div> <!----end of navbar header--->
<div class="navbar-collapse collapse" id="navigation">
<div class="padding-nav">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Colors</a></li>
<li><a href="#">How-To</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact Us</a></li>
</ul> <!----end of navbar-left--->
</div> <!----end of padding nav--->
<a class="btn btn-primary navbar-btn right" href="#" >
<i class="fa fa-shopping-cart"></i>
<span>Cart 0</span>
</a>
<div class="navbar-collapse collapse right">
<button class="btn navbar-btn btn-primary" type="button" data-toggle="collapse" data-target="#search">
<span class="sr-only">Toggle Search</span>
<i class="fa fa-search"></i>
</button>
</div> <!----navbar-collapse collapse right ends here--->
<div class="collapse clearfix" id="search">
<form class="navbar-form" method="get" action="results.php">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search......" name="user_query" required />
<span>
<button type="submit" value="Search" name="search" class="btn btn-primary">
<i class="fa fa-search"></i>
</button>
</span>
</div> <!----input-group ends here--->
</form> <!----navbar-form ends here--->
</div> <!----collapse clearfix ends here--->
</div> <!----navbar-collapse ends here--->
</div> <!----end of container--->
</div> <!----end of navbar-navbar--->
索引.php
<?php
include_once 'header.php';
?>
<?php
include_once 'nav.php';
?>
<div class="container" id="slider">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol> <!---carousel-indicators ends here ---->
<div class="carousel-inner">
<div class="item active">
<img src="admin_area/slide_images/1.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/2.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/3.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/4.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/5.jpg">
</div>
</div> <!---carousel-inner ends here ---->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a> <!---left carousel-control ends here ---->
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a> <!---right carousel-control ends here ---->
</div> <!---carousel slide ends here ---->
</div> <!---col-md-12 ends here ---->
</div> <!---container ends here ---->
<div class="advantages">
<div class="container">
<div class="same-height-row">
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i class="fa fa-globe" aria-hidden="true"></i>
</div>
<h3><a href="#">FAST GLOBAL SERVICE</a></h3>
<p>We are know to provide best possible service ever</p>
</div> <!---box same-height ends here ---->
</div> <!---col-sm-4 ends here ---->
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i class="fa fa-cc-paypal" aria-hidden="true"></i>
</div>
<h3><a href="#">EASY AND SAFE TRANSACTION</a></h3>
<p>Encrypted payment gateway through PayPal</p>
</div> <!---box same-height ends here ---->
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i class="fa fa-credit-card-alt" aria-hidden="true"></i>
</div>
<h3><a href="#">NO INTERMEDIARIES</a></h3>
<p>Avoid any business with middlemen</p>
</div> <!---box same-height ends here ---->
</div> <!---col-sm-4 ends here ---->
</div> <!---same-height-row ends here ---->
</div> <!---container ends here ---->
</div> <!---advantages ends here ---->
<?php include_once 'footer.php'; ?>
這是我的完整代碼。 這是我瀏覽器的截圖 ScreenShot
當我點擊搜索按鈕時，我應該得到一個帶有搜索框的下拉分區。 但是我不明白！！ 我需要一個可以查看代碼並幫助我解決問題的人。 我目前正在處理將於周三到期的項目。
這是我的 footer.php 。 我編輯了我的 header.php 並刪除了 jquery 和 bootstrap.js，然后將其放置到頁腳
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
感謝您幫助我解決了我的問題。 現在它完美地工作。
如果我使用php生成ID，為什么數據目標無法在引導程序中工作？
[英]why the data-target is not working in bootstrap if I use php to generate the id?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.