我使用codeigniter与基础作为我的前端,在我的索引视图上,我有一个与登录和注册表单的选项卡,我的登录表单选项卡显示,但当我点击注册选项卡时,它不显示。当我查看页面源时,注册视图已经正确加载到我的主视图中,它只是不显示。
authentication.php(默认加载的视图)
<div class="row">
<div class="medium-12 columns">
<ul class="tabs" data-tabs id="authentication_tab">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Login</a></li>
<li class="tabs-title"><a href="#panel2" >Sign Up</a></li>
</ul>
<div class="tabs-content" data-tabs-content="authentication_tab">
<div class="tabs-panel is-active" id="panel1">
<?php $this->load->view('authentication/login');?>
</div>
<div class="tabs-panel " id="panel2">
<?php $this->load->view('authentication/reg');?>
</div>
</div>
</div>
</div>
<?php $this->load->view('templates/footer');?>
登录表单
<?php $attributes= array('id'=>'login_form','class'=>'form_horizontal');?>
<?php if($this->session->flashdata('errors')):?>
<?php echo $this->session->flashdata('errors');?>
<?php endif;?>
<?php echo form_open('Authentication/login_check',$attributes);?>
<div class="medium-12 columns">
<?php
echo form_label('Email');
$data = array(
'class'=>'form-control',
'name'=>'email',
'placeholder'=>'Email'
);
echo form_input($data);
?>
</div>
<div class="medium-12 columns">
<?php
echo form_label('Password');
$data = array(
'class'=>'form-control',
'name'=>'password',
'placeholder'=>'Password'
);
echo form_input($data);
?>
</div>
<?php
$data = array(
'class'=>'button large-12',
'name'=>'register',
'id'=>'register',
'value'=>'Register'
);?>
<?php echo form_submit($data);?>
</div>
<?echo form_close();?>
报名表
<?php $attributes= array('id'=>'registration_form','class'=>'form_horizontal');?>
<?php if($this->session->flashdata('errors')):?>
<?php echo $this->session->flashdata('errors');?>
<?php endif;?>
<?php echo form_open('Authentication/registration_check',$attributes);?>
<div class="medium-6 columns">
<?php
echo form_label('First Name');
$data = array(
'class'=>'form-control',
'id'=>'fname',
'name'=>'fname',
'placeholder'=>'First Name'
);
echo form_input($data);
?>
</div>
<div class="medium-6 columns">
<?php
echo form_label('Last Name');
$data = array(
'class'=>'form-control',
'name'=>'lname',
'placeholder'=>'Last Name'
);
echo form_input($data);
?>
</div>
<div class="medium-6 columns">
<?php
echo form_label('Email');
$data = array(
'class'=>'form-control',
'name'=>'email',
'placeholder'=>'Email'
);
echo form_input($data);
?>
</div>
<div class="medium-6 columns">
<?php
echo form_label('Confirm Email');
$data = array(
'class'=>'form-control',
'name'=>'cemail',
'placeholder'=>'Confirm Email'
);
echo form_input($data);
?>
</div>
<div class="medium-6 columns">
<?php
echo form_label('Password');
$data = array(
'class'=>'form-control',
'name'=>'password',
'placeholder'=>'Password'
);
echo form_input($data);
?>
</div>
<div class="medium-6 columns">
<?php
echo form_label('Confirm Password');
$data = array(
'class'=>'form-control',
'name'=>'cpassword',
'placeholder'=>'Confirm Password'
);
echo form_input($data);
?>
</div>
<div class="medium-4 columns">
<?php echo "<select name='day' id='day'><option value='default'>day</option>";
for($i=1; $i<32; $i++){
echo "<option value='$i'".($i==$_POST["day"] ? " selected" : null).">$i</option>";
}
echo "</select>";?>
</div>
<div class="medium-4 columns">
<?php
echo "<select name='month' id='month'><option value='default'>month</option>";
for($i=1; $i<13; $i++){
echo "<option value='$i'".($i==$_POST["month"] ? " selected" : null).">$i</option>";
}
echo "</select>";
?>
</div>
<div class="medium-4 columns">
<?php
echo "<select name='year'id='year'><option value='default' >year</option>";
for($i=1900; $i<2016; $i++){
echo "<option value='$i'".($i==$_POST["year"] ? " selected" : null).">$i</option>";
}
echo "</select>";
?>
</div>
<?php
$data = array(
'class'=>'button large-12',
'name'=>'register',
'id'=>'register',
'value'=>'Register'
);?>
<?php echo form_submit($data);?>
</div>
<?echo form_close();?>
authentication.css
body{
background-color:#f2f2f0;
}
/* registration and login form tab design*/
.tabs {
width:400px;
background-color: #fff;
border-color: #fff;
text-align:center;
border-top-left-radius:2em;
border-top-right-radius:2em;
}
.tabs,.tabs-content {
border-color: #ccc;
-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
.tabs a{
width:199px;
text-decoration: none;
color: #2199e8;
font-weight: bold;
font-size: 15px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
text-align:center;
}
.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
background: white;
color:#147cc0;
border-top-right-radius:2em;
border-top-left-radius:2em;
}
.tabs-title > a:hover {
border-top-right-radius:2em;
border-top-left-radius:2em;
color:#147cc0;
}
.tabs-content {
width:400px;
background-color:#fff;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
}
.row {
position:absolute;
top:30%;
left:40%;
margin-top:-50px; /* this is half the height of your div*/
margin-left:-100px; /*this is half of width of your div*/
}
.button {
border-radius:5px;
font-weight: bold;
}
/* End of registration and login form tab design*/
/* registration form style */
label,#day,#month,#year {
color: #2199e8;
font-weight:bold;
}
.form-control {
color:#147cc0;
font-weight:bold;
}
/* End of registration form style */
/* callout style */
.email_success {
border-radius:20px;
background-color:#7CFF8A;
color:white;
width:800px;
position:absolute;
top:30%;
left:30%;
margin-top:-50px; /* this is half the height of your div*/
margin-left:-100px; /*this is half of width of your div*/
-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
/* End of callout style */
谢谢你的帮助,我找到了问题所在。
在我的登录视图的底部,我错过了php标签的php,如下所示
<?echo form_close();?>
改为
<?php echo form_close();?>
已编辑如未添加请添加以下内容
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation-flex.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://foundation.zurb.com/sites/docs/v/5.5.3/assets/js/modernizr.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/plugins/foundation.core.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/plugins/foundation.tabs.js"></script>
正确阅读文档后,我发现我们需要像这里提到的那样初始化它http://foundation.zurb.com/sites/docs/javascript.html#initializing
所以只需再添加一个东西,即
<script type="text/javascript">
$(document).foundation();
</script>
,您的代码将开始工作。