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 回答