单击其中一个选项卡时如何显示php页面_Php_Html_Css

单击其中一个选项卡时如何显示php页面

php html css

单击其中一个选项卡时如何显示php页面,php,html,css,Php,Html,Css,我有以下导航代码。我还创建了london.php、tokyo.php页面单击相应的选项卡时，如何向用户显示这些.php页面这个例子取自W3学校 <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"

我有以下导航代码。我还创建了london.php、tokyo.php页面

单击相应的选项卡时，如何向用户显示这些.php页面

这个例子取自W3学校

<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>Active Tabs</h2>
  <p>To highlight the current tab/page the user is on, add a color class, and use JavaScript to update the active link.</p>

  <div class="w3-bar w3-black">
    <button class="w3-bar-item w3-button tablink w3-red" onclick="openCity(event,'London')">London</button>
    <button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Paris')">Paris</button>
    <button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Tokyo')">Tokyo</button>
  </div>
  
  <div id="London" class="w3-container w3-border city">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
  </div>

  <div id="Paris" class="w3-container w3-border city" style="display:none">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p> 
  </div>

  <div id="Tokyo" class="w3-container w3-border city" style="display:none">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</div>

<script>
function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " w3-red";
}


W3.CSS
活动选项卡
要突出显示用户所在的当前选项卡/页面，请添加颜色类，并使用JavaScript更新活动链接
伦敦
巴黎
东京
伦敦
伦敦是英国的首都
巴黎
巴黎是法国的首都。
东京
东京是日本的首都
函数openCity（evt、cityName）{
变量i，x，t；
x=document.getElementsByClassName（“城市”）；
对于（i=0；i


向每个选项卡添加数据属性：
伦敦巴黎东京


您需要通过单击选项卡发送ajax请求：
$（“.tablink”）。单击（函数（）{
设tab=$（this）.data（“tab”）；
$.ajax({
url:“path/to/files”+tab+“.php”，
键入：“获取”，
成功：功能（响应）{
$（“+tab）.html（响应）；
}
});
});


向每个选项卡添加数据属性：
伦敦巴黎东京


您需要通过单击选项卡发送ajax请求：
$（“.tablink”）。单击（函数（）{
设tab=$（this）.data（“tab”）；
$.ajax({
url:“path/to/files”+tab+“.php”，
键入：“获取”，
成功：功能（响应）{
$（“+tab）.html（响应）；
}
});
});


希望这个链接能解决你的问题希望这个链接能解决你的问题你好，对不起，我是新手。我复制并粘贴了上面的代码。不幸的是，它没有任何作用。任何其他帮助都将不胜感激。你好，对不起，我是个新手。我复制并粘贴了上面的代码。不幸的是，它没有任何作用。任何其他帮助都将不胜感激。