使用侧边栏菜单最有效的方法是什么?

时间:2017-12-14 18:43:59

标签: javascript php jquery html css

因此,如果我必须制作像学校网站这样的侧边栏菜单,其中在页面加载后突出显示活动的点击链接。它使用像

这样的单独页面
<a target="_top" href="default.asp">HTML HOME</a>
<a target="_top" href="html_intro.asp">HTML Introduction</a>
<a target="_top" href="html_editors.asp">HTML Editors</a>
<a target="_top" href="html_basic.asp">HTML Basic</a>
<a target="_top" href="html_elements.asp">HTML Elements</a>

但我自己构建的那个是用PHP创建的,所以在那一个中​​发生的是菜单项的标题或名称被更改为小写并保存在数据库的同一行中,称为类,用于主动链接突出显示。那么当点击侧边栏链接时发生的事情只是汇总div内容的内容 (侧边栏右侧)更改,侧边栏和导航栏保持不变。因此它保留在同一页面上并从数据库中检索数据并放入汇总div。

<body class='noPadding'>
     <div class='bigNav'>             <!-- top navbar -->
          <img src="images/logo2.png"/>
     </div>

     <?php
     if(isset($_GET['subject'])){
         $subject=$_GET['subject'];


     ?>
     <div class='container'>
        <div class='leftLayout' style='padding-top:70px;background-color:#EBEBEB'>
            <ul class="fullFit">
              <?php
                 $query="SELECT * FROM `study` WHERE `subject`='$subject'";
                 $run=mysqli_query($conn,$query);
                 while($row=mysqli_fetch_array($run)){
                       $topic=$row['topic'];
                       $class=$row['class'];  ?>

                             <li  class="<?php echo $class?>">
                               <a href='<?php echo $sitename ?>/web.php?subject=<?php echo $subject?>&topic=<?php echo $class?>'>
                                   <?php echo $topic?>
                               </a>
                             </li>

                  <?php  }  ?>

            </ul>
        </div>

     <?php
     if(isset($_GET['topic'])) {
         $active_id=$_GET['topic'];
         $topic=$_GET['topic'];
         $query="SELECT summary FROM `study` WHERE `class`='$active_id'";
         $run=mysqli_query($conn,$query);
         $row=mysqli_fetch_array($run);
         $summary=$row[0];
      ?>
        <div class='summary'> <?php echo $summary ?> </div>
      <?php } ?>


     </div>
  <script>

      $(document).ready(function(){
        $(".<?php echo $active_id ?>").addClass("current");
        });

  </script>

<?php  }  ?>

</body> 

而且,如果我必须像许多网站(包括W3Schools)那样制作单独的页面,我是否每次都必须创建一个新文件,并在每个文件中包含导航栏和侧边栏(应该在每个链接上保持相同) ? 他们是如何管理的?

1 个答案:

答案 0 :(得分:-1)

我希望这与你目前的结构没有多大差别 我不打算把你带到一个兔子洞里。

话虽如此,听起来你可以将所有内容编码到一个PHP文件中。请注意,这只是众多方法中的一种,高度依赖于项目的范围和个人编码风格。

数据库

<强>受试者

`id`
`name`

<强>主题

`id`
`subject_id`
`name`
`summary`

PHP

<?php

// define database functions

function getAllSubjects($conn) {
  $sql="SELECT * FROM `subject` WHERE 1;";
  $q=$conn->query($sql);
  return $q; 
}

function getSubject($conn,$subject_id=false) {
  $r=false;
  if (is_numeric($subject_id)) {
    $sql = "SELECT * FROM `subject` WHERE `id`=?;";
    $q = $conn->prepare($sql);
    $q->bind_param('i',$subject_id);
    $q->execute();
    $r=$q->fetch_assoc();
  }
  return $r;
}

function getSubjectTopics($conn,$subject_id=false) {
  $q=false;
  if (is_numeric($subject_id)) {
    $sql = "SELECT * FROM `topic` WHERE `subject_id`=?;";
    $q = $conn->prepare($sql);
    $q->bind_param('i',$subject_id);
    $q->execute();
  }
  return $q;
}

function getTopic($conn,$topic_id=false) {
  $r=false;
  if (is_numeric($topic_id)) {
    $sql = "SELECT * FROM `topic` WHERE `id`=?;";
    $q = $conn->prepare($sql);
    $q->bind_param('i',$topic_id);
    $q->execute();
    $r=$q->fetch_assoc();
  }
  return $r;
}


// get URL parameters

$subject_id = !empty($_GET['s']) && is_numeric($_GET['s'])
  ? $_GET['s']
  : false;

$topic_id = !empty($_GET['t']) && is_numeric($_GET['t'])
  ? $_GET['t']
  : false;


// fetch all subjects from database
$subjectsQ=getAllSubjects($conn);

// fetch current subject
$thisSubject = $subject_id
  ? getSubject($conn,$subject_id)
  : false;

// fetch current subject topics
$thisSubjectTopicsQ = !empty($thisSubject)
  ? getSubjectTopics($conn,$subject_id)
  : false;

// fetch current topic
$thisTopic = $topic_id
  ? getTopic($conn,$topic_id)
  : false;


// display subject navigation
while($subject = $subjectsQ->fetch_assoc()){

  // determine if this subject is selected
  $sel = !empty($thisSubject) && $thisSubject['id']==$subject['id']
    ? true
    : false;

  // define the URL
  $url = '?s='.$subject['id'];

  // display nav item for this subject
  echo '<a href="' . $url . '"'
         . ($sel?' class="sel"' : '')
         . '>' . $subject['name']
         . '</a>';

}

// if there are subject topics to display...
if ($thisSubjectTopicsQ && $thisSubjectTopicsQ->num_rows > 0) {

  // loop through this subject's topics
  while($topic=$thisSubjectTopicsQ->fetch_assoc()){

    // determine if this topic is selected
    $sel = !empty($thisTopic) && $thisTopic['id']==$topic['id']
      ? true
      : false;

    // define the URL
    $url = '?s='.$thisSubject['id'].'&t='.$topic['id'];

    // display nav item for this topic
    // (alternate way to display the link)
    ?><a href="<?=$url?>"<?=$sel?' class="selected"':''?>><?php
      echo $topic['name'];
    ?></a><?php

  }

}

// if there is a topic to display
if (!empty($thisTopic)) {
  // display topic summary
  echo $thisTopic['summary'];
}

这是一个基本的例子。当然,它不包含任何HTML结构。

也可以加入这两个表,这样你就不需要这么多抓取了。例如,获取主题也可以返回其主题:

$sql="SELECT s.`id` AS `subject_id,
             s.`name` AS `subject_name`,
             t.`id` AS `topic_id,
             t.`name` AS `topic_name`,
             t.`summary` AS `topic_summary`
      FROM `topic` t
      LEFT JOIN `subject` s ON (s.`id`=t.`subject_id`)
      WHERE t.`id`=?";