Question

我想拥有动态标签。我有两个表，一个是天，另一个是工作。

天

+ -------- + -------- +
| day_id |一天|
+ ------- + --------- +
| 1 |第1天|
| 2 |第2天|
| 3 |第3天|
+ ------- + --------- +

工作

+ -------- + -------- + ----------- +
| work_id | day_id |工作|
+ -------- + -------- + ----------- +
| 1 | 1 | ABC |
| 2 | 2 | PQR |
| 3 | 3 | XYZ |
+ ------- + ------- + ----------- +

我想在动态标签中有几天，我已经使用foreach填充了它。现在我想显示特定标签的工作例如：第1天标签将有工作ABC。所以我的问题是如何选择day_id并显示当天的工作并使标签可点击。

我的控制器

构件：

    public function work_plan()
{
    $data['days'] = $this->member_model->get_days();
    $data['main_content'] = 'view';
    $this->load->view('includes/template', $data);
}

视图：

     <ul class="tabs">

         <?php foreach($days as $curr_day): 
            $day_id = $curr_day['day_id'];
            $day    = $curr_day['day'];?> 

            <li><a  href="<?php echo base_url();?>member/work_plan"><?=$day;?></a></li>
            <?php endforeach; ?>
     </ul>

    <table>
      <tr>
          <td>No</td>
          <td>Work</td>
      </tr>

      <tr>
          <td>1</td>
          <td>ABC</td>
       </tr>
       <tr>
           <td>2</td>
           <td>PQR</td>
       </tr>
   </table>

提前致谢...

Answer 1

你需要这样的东西（这只是一个暗示）

但您必须查询数据库以获取work_id和day_id 我不是javascript专家，但它应该与此类似

$(document).ready(function() {
 
        var currentId;
        var content;
          
        $(".subtabs").hover(function(){
            $(this).css("font-size","35px");
            $(this).css("cursor","pointer");
        },function(){
            $(this).css("font-size","24px");
        });

        $(".subtabs").click(function(){
            if($(this).attr('contentId') == currentId)
            {
                $(".subContents").animate({height:"0px"},1000);
                $(".subContents").html("");
            }
            else
            {
            $(".subtabs").css("background-color","");
            $(".subContents").animate({height:"0px"},1000);
            $(".subContents").html("");
            $(this).css("background-color","#0000BF");
            currentId = $(this).attr('contentId');
            content ="content here";
            $("div[id$="+currentId+"]").animate({height:"600px"},500);
            $("div[id$="+currentId+"]").html(content);
            }
        });

        $(".subtabs").toggle(function(){
        },
        function(){
            
        });
    });

body
    {
        margin: 0;
        padding: 0;
    }
    #top
    {
        height: 20px;
    }
    .tabs
    {
        margin: 0px auto;
        width: 850px;
        height: 50px;
    }
    .subtabs
    {
        margin-left: 10px;
        margin-right: 10px;
        height: 50px;
        width: 100px;
        line-height: 50px;
        text-align: center;
        float: left;
        font-size: 24px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background-color: #4679BD;
    }
    .content
    {
    }
    .subContents
    {
        margin: 0px auto;
        padding-left: 50px;
        padding-right: 50px;
        border-radius: 10px;
        height: 0px;
        width: 850px;
        background-color: #00ACEE;
        border-radius: 0px 0px 5px 5px;
    }
    .bottom
    {
        height: 3px;
        background-color: #00ACEE;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
<title>jQuery 1.7.2</title>
</head>
<body>
<div id="top"></div>
<div class="tabs">
    <div class="subtabs" contentId="uid1">work1</div>
    <div class="subtabs" contentId="uid2">work2</div>
    <div class="subtabs" contentId="uid3">work3</div>
</div>
<div class="bottom"></div>
<div class="content">
    <div class="subContents" id="uid1"><p>content of work 1</p></div>
    <div class="subContents" id="uid2"><p>content of work 2</p></div>
    <div class="subContents" id="uid3"><p>content of work 3</p></div>
</div>
</body>
</html>

如何在Codeigniter中显示动态选项卡和数据

1 个答案: