如何制作一个简单的导航器 - 内容菜单

时间:2015-01-06 23:08:42

标签: php jquery css twitter-bootstrap yii

附件是导航器的代码片段

<!-- Navigator -->
<div style="position:abolute;top:50px" class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul id="yw0" class="nav">
                <li class="active"><a href="<?php $this->renderPartial("company",false); ?>" style="color:black">Company</a></li>
                <li><a  style="color:black" href="#"><i class="fa fa-lightbulb-o"></i>&nbspFAQs</a></li>
                 <li><a  style="color:black" href="#"><i class="fa fa-question-circle"></i>&nbspHelp Center</a></li>
                 <li><a  style="color:black" href="#"><i class="fa fa-newspaper-o"></i>&nbspPress</a></li>
                <li><a  style="color:black" href="#">Careers</a></li>
                   <li><a  style="color:black" href="#"><i class="fa fa-envelope-o"></i>&nbspContact Us</a></li>
              </ul>
            </div>
          </div>
</div>
<!-- Content -->

我实际上试图设置一个逻辑,每当我点击链接时,它应该renderPartial相应的文件,并突出显示导航器下面的菜单..我尝试执行以下操作<a href="<?php $this->renderPartial("company",false); ?>" 但我想这不是正确的方法..不知道我怎么能实现它?

1 个答案:

答案 0 :(得分:1)

这将进入您的视图文件

    <!-- Navigator -->
    <div style="position:abolute;top:50px" class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <ul id="yw0" class="nav">
                    <li class="active"><a href="#" onclick="showData('company')" style="color:black">Company</a></li>
                    <li><a onclick="showData('user')"   style="color:black" href="#"><i class="fa fa-lightbulb-o"></i>&nbspFAQs</a></li>
                     <li><a  style="color:black" href="#"><i class="fa fa-question-circle"></i>&nbspHelp Center</a></li>
                     <li><a  style="color:black" href="#"><i class="fa fa-newspaper-o"></i>&nbspPress</a></li>
                    <li><a  style="color:black" href="#">Careers</a></li>
                       <li><a  style="color:black" href="#"><i class="fa fa-envelope-o"></i>&nbspContact Us</a></li>
                  </ul>
                </div>
              </div>
    </div>

<div class="main-content">
    <div id="company" class="renderContent">
       <?php $this->renderPartial("company",false); ?>
    </div>
    <div id="user" class="renderContent">
       <?php $this->renderPartial("user",false); ?>
    </div>
<!--- for every menu item there should be a view rendered here--->
</div>
    <!-- Content -->

这将进入你的js

function showData(id) {
    $('.renderContent').hide();
    $('.nav li').removeClass('active');
    $(this).addClass('active');
    $('#'+id).show();
}
$('.renderContent').hide();