Question

我有这个问题：

我想制作一个带标签的导航菜单，当我点击该元素时保持选中状态。但与此同时，我希望每个示例都有一个名为index.php的页面，其中HEADER（菜单，徽标等），FOOTER和正文{{1}从其他页面加载内容（images.php，articles.php，about.php等）

好吧，我曾尝试使用ID DIV并且它有效，但内容显示许多错误，因为这些内容取决于数据库（jQuery），所有带有变量的函数都在{ {1}}。

菜单：

MySQL

jQuery：

index.php

PHP代码：

<li><a href="index.php?pag=1&lang=<?php echo $lang;?>"><?php echo $ent;?></a></li>
<li><a href="index.php?pag=2&lang=<?php echo $lang;?>"><?php echo $lis;?></a></li>

无论如何，当我点击时，CSS类“选择”了它的丢失。任何的想法？非常感谢！

Answer 1

根据我的想法，您要求您想要一个具有内容div的页面，该内容div根据您选择的菜单项加载不同的内容。一种预先打包的方法是使用jquery ui标签，你可以找到here。

自己动手的方法会产生类似的页面，但会使用您自己的代码。我将在此概述，如果您想了解更多详情，请告诉我。

首先，您将制作某种涉及某种元素的菜单项。一个例子是使用列表。

<ul>
  <li id="one">Link 1</li>
  <li id="two">Link 2</li>
  <li id="three">Link 3</li>
</ul>

接下来，您将使用jquery将单击事件绑定到列表项。这是一个例子。

$('#li_id').click(function (e) {
  $('#contentDiv').empty(); //empty div in case content from other tabs exists

  //load your ajax content here
  $.ajax();

  //remove selected class from other li that might have it.
  $('li.selected').removeClass('selected')          
  $(this).attr("class", "selected"); //set li class to show selected styling
}

在此之后，您只需为所选类添加一个css条目，以便按照您想要的方式设置它。

如果您有任何其他问题或需要更多详细说明，请告诉我。

Answer 2

点击某个元素并让其保持选择状态＆＃39;可以使用CSS样式完成，使用“选择”和＃39;类。首先删除所选的＆＃39;来自所有元素的类，用于从先前选择的任何元素中删除样式：

 $('nav').children('.selected').attr('className','');

然后选择＆＃39;刚刚点击的项目

 $(this).attr('className','selected');

Answer 3

好的，这有各种各样的方面需要考虑/接近。

如果你想通过jQuery继续这样做，你需要使用AJAX帖子调用从数据库加载数据的php页面，然后通过JSON请求将它发送回你的jQuery代码（它为你做这个）然后你只需将结果显示在您想要的位置即可。您可以通过在此网站甚至谷歌搜索AJAX Post来轻松了解如何做到这一点。这个方法有很多非常简单的教程。

如果您从数据库加载导航，那么选择它将不会很困难。如果你不是那么你将需要使用javascript / jQuery在之后添加css。

仅使用PHP和HTML： 我通常做的是为了获得类似于我认为你要问的结果是将变量附加到URL然后使用$ _GET [variable_name]来使用这些变量来搜索我需要从数据库加载的数据，如文章的ID或日期范围。

一个非常粗略的例子：

<a href='/index.php?articleID=145&nav=navlinkclicked&category=phpcode'>

当用户点击该链接时，它会重新加载页面，然后在您使用的php文件中：

$articleID = $_GET[articleID];
$navLlink = $_GET[navlinkclicked];
$query = "_write your query code to pull up the article with that $articleID_";

然后只是在页面的主要内容区域中回显您的结果，而不是加载首先存在的原始内容。

假设您从数据库中提取导航链接，当您获取导航链接时，请检查导航链接是否与从顶部获取的$ navLlink同名，然后在回显时将该类添加到该链接在while循环期间，使用if语句：

if($thisnavitem == $navLlink){
    echo "<a href='/index.php?articleID=145&nav=navlinkclicked&category=phpcode' class='selectedNave'>"
} else {
    <a href='/index.php?articleID=145&nav=navlinkclicked&category=phpcode'>
}

我希望这会有所帮助。这可以详细阐述，但这应该是一个好的开始

导航栏（菜单）包括

3 个答案: