0

我有这个问题：

我想制作一个带有选项卡的导航菜单，当我单击该元素时，它会保持选中状态。但同时，我希望index.php每个示例调用一个页面，其中包含HEADER（菜单、徽标等），FOOTER并在正文ID DIV中加载来自其他页面的内容（images.php、articles.php、about.php）。 php等）

好吧，我尝试过使用它jQuery并且它可以工作，但是内容显示了许多错误，因为这些内容取决于数据库（MySQL）并且所有带有其变量的函数都在index.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>

jQuery：

$(document).ready(function(){
    var elemento = $('#menu ul > li');
    var atributo = $(this).attr('class');
    $(elemento).click(function(){
        //$('#cuerpo').load('1.php');
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');
        //alert("Ha salido bien");
    });

});

PHP代码：

<div id="cuerpo">
 <?php

 switch($_GET['pag']){
    case 1:
    echo "<h1>Estamos en la página ".$_GET['pag']."</h1>";
    include '1.php';

    break;

    case 2:
    echo "<h1>Estamos en la página ".$_GET['pag']."</h1>";
    include '2.php';
    break;

    default:
    include '1.php';
    break;
 }

 ?>

</div>

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

4

3 回答 3

1

从我认为您要问的内容来看，您希望拥有一个包含内容 div 的页面，该页面根据您选择的菜单项的方式加载不同的内容。一种预先打包的方法是使用您可以在此处找到的 jquery ui 选项卡。

一种自己做的方法将产生一个类似的页面，但将使用您自己的代码。我将在这里概述它，如果您想了解更多详细信息，可以告诉我。

  1. 首先，您将制作包含某种元素的某种菜单项。这方面的一个例子是使用列表。

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

  2. 接下来，您将使用 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 条目，以便按照您的需要设置样式。

如果您有任何进一步的问题或需要更多详细说明，请告诉我。

于 2013-06-17T19:08:13.807 回答
1

单击一个元素并使其保持“选定”状态可以通过 CSS 样式使用“选定”类来完成。首先从所有元素中删除 'selected' 类，以从之前选择的任何元素中删除样式：

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

然后“选择”刚刚点击的项目

 $(this).attr('className','selected');
于 2013-06-17T19:08:43.250 回答
1

好的，这有各种不同的方面需要考虑/处理。

如果您想通过 jQuery 继续执行此操作，您需要使用 AJAX 帖子调用从数据库加载数据的 php 页面，然后通过 JSON 请求将其发送回您的 jQuery 代码（它为您执行此操作）然后您只需结果显示在您想要的位置。您可以通过在本网站甚至 google 上搜索 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 具有相同的名称，然后在该链接被回显时添加一个类循环，使用 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'>
}

我希望这有帮助。这可以详细说明，但这应该是一个好的开始

于 2013-06-17T19:13:21.420 回答