Hello My dear laravel buddies, i have my e-shop, so here i have an issues for click tab with active class i have HTML Template for static, But i have implemented as full MVC Format then there is a issues with static vs dynamic data,
Here is my HTML Template:
<div class="tab1 uk_delivery">
<div class="tabBox">
<div class="tabs_menu">
<h4>UK DELIVERY</h4>
<ul class="tabs">
<li><a href="#tab1">Bespoke services</a></li>
<hr>
<li><a href="#tab4">How it's made</a></li>
<hr>
<li><a href="#tab7">Cushion filling</a></li>
<hr>
<li><a href="#tab5">Fabric selection</a></li>
<hr>
<li><a href="#tab6">Finishing touches</a></li>
<hr>
<li><a href="#tab8">Reupholstery</a></li>
<hr>
<a href="#"><img src="images/abt_fb.png" alt=""></a>
<a href="#"><img src="images/abt_tweet.png" alt=""></a>
<a href="#"><img src="images/abt_pin.png" alt=""></a>
<a href="#"><img src="images/abt_insta.png" alt=""></a>
</ul>
</div>
<div class="tab_Container">
<div id="tab1" class="tabContent">
<div class="abt_content abt_bespoke">
<img src="images/bespoke_contact.png">
<h3>BESPOKE SERVICES</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>1. Lorem Ipsum</p>
<p>2. Lorem Ipsum text</p>
<p>3. Lorem Ipsum is simply dummy text</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>If you have any questions, please get in touch with us on 0111 222 3000 or email <a href="">info@alterlondon.com</a></p>
<p>*Our showroom is closed on Saturdays and Sundays so no collections can be made on this friday. For full opening time please our <a href="contactus.html">Contact</a> page</p>
</div>
</div>
<div id="tab4" class="tabContent">
<div class="abt_content abt_bespoke">
<img src="images/bespoke_contact.png">
<h3>OUR STEP-BY-STEP PROCESS</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="bespoke_manufacture">
<div class="bespoke_manufacture_img">
<a href="#"><img src="images/project1.png" alt=""></a>
<a href="#"><img src="images/project2.png" alt=""></a>
<a href="#"><img src="images/project3.png" alt=""></a>
<a href="#"><img src="images/project4.png" alt=""></a>
<a href="#"><img src="images/project5.png" alt=""></a>
<a href="#"><img src="images/project1.png" alt=""></a>
</div>
</div>
</div>
</div>
<div id="tab7" class="tabContent">
<div class="abt_content abt_bespoke">
<img src="images/bespoke_contact.png">
<h3>CUSHION FILLING</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
<div id="tab5" class="tabContent">
<div class="abt_content abt_bespoke">
<img src="images/bespoke_contact.png">
<h3>FABRIC SELECTION</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
<div id="tab6" class="tabContent">
<div class="abt_content abt_bespoke">
<img src="images/bespoke_contact.png">
<h3>FINISHING TOUCHES</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>1. Lorem Ipsum</p>
<p>2. Lorem Ipsum text</p>
<p>3. Lorem Ipsum is simply dummy text</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<div id="tab8" class="tabContent">
<div class="abt_content abt_bespoke">
<img src="images/bespoke_contact.png">
<h3>REUPHOLSTERY</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>1. Lorem Ipsum</p>
<p>2. Lorem Ipsum text</p>
<p>3. Lorem Ipsum is simply dummy text</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>
</div>
Then here is my controller
<?php
namespace Frontend;
use FrontOfficeController;
use BespokeLanding;
use View;
use Block;
use stdClass;
class BespokeLandingPageController extends FrontOfficeController {
public function index(){
$bespoke_landing = BespokeLanding::with('bespoke_landing_images')->get();
// print_r($bespoke_landing);
// exit;
// $metas = new stdClass;
//$metas->title = $bespoke_landing->meta_title;
//$metas->content = $bespoke_landing->meta_description;
//$metas->keyword = $bespoke_landing->meta_keyword;
return View::make('frontend.bespoke_landing.landing_page', compact('bespoke_landing','metas'));
}
}
Here is my model:
<?php
class BespokeLanding extends \Eloquent {
protected $table = 'bespoke_landing';
protected $fillable = ['name','description','slug','image','short_description','meta_title','meta_description','meta_keyword'];
public static $rules = array(
'name' => 'required',
'description' => 'required',
'short_description' =>'required',
'slug' => 'required | unique:bespoke_landing',
'image' => 'required',
'meta_title'=>'required | unique:bespoke_landing',
'meta_description'=>'required | unique:bespoke_landing',
'meta_keyword'=>'required | unique:bespoke_landing'
);
public static $editrules = array(
'name' => 'required',
'description' => 'required',
'short_description' =>'required',
'slug' => 'required | unique:bespoke_landing',
'image' => 'required',
'meta_title'=>'required | unique:bespoke_landing',
'meta_description'=>'required | unique:bespoke_landing',
'meta_keyword'=>'required | unique:bespoke_landing'
);
public function bespoke_landing_images() {
return $this->hasMany('BespokeLandingImage');
}
}
Here is my view:
@include('partials.header')
@section('content')
<div class="pag_nav">
<ul>
<li><a href="http://devhosting.wiredelta.in/alterlondon/html/index.html">Home /</a></li>
<li><a href="http://devhosting.wiredelta.in/alterlondon/html/aboutalter.html">About Alter London</a></li>
</ul>
</div>
<div class="about_body">
<div class="container_tab">
<div class="aboutalter-secondrymenu">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="tab1 uk_delivery">
<div class="tabBox">
<div class="tabs_menu">
<h4>UK DELIVERY</h4>
<ul class="tabs">
@foreach($bespoke_landing as $landing)
<li class="active"><a href="#">{{$landing['slug']}}</a></li>
<hr>
@endforeach
<a href="#"><img src="{{URL::to('/')}}/template/default/images/abt_fb.png" alt=""></a>
<a href="#"><img src="{{URL::to('/')}}/template/default/images/abt_tweet.png" alt=""></a>
<a href="#"><img src="{{URL::to('/')}}/template/default/images/abt_pin.png" alt=""></a>
<a href="#"><img src="{{URL::to('/')}}/template/default/images/abt_insta.png" alt=""></a>
</ul>
</div>
<div class="tab_Container">
<div id="tab1" class="tabContent">
<div class="abt_content abt_bespoke">
@foreach($bespoke_landing as $landing)
<img src="{{URL::to('/')}}/uploads/home/bespoke_landing/originals/{{$landing['image']}}">
<h3>{{$landing['slug']}}</h3>
<p>{{$landing['description']}}</p>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
@include('partials.footer')
So can any one help me to do the Tab for which is in static to dynamic foreach to list the content and click active class,
Static Content:
<div class="tabBox">
<div class="tabs_menu">
<h4>UK DELIVERY</h4>
<ul class="tabs">
<li><a href="#tab1">Bespoke services</a></li>
<hr>
<li><a href="#tab4">How it's made</a></li>
<hr>
<li><a href="#tab7">Cushion filling</a></li>
<hr>
<li><a href="#tab5">Fabric selection</a></li>
<hr>
<li><a href="#tab6">Finishing touches</a></li>
<hr>
<li><a href="#tab8">Reupholstery</a></li>
<hr>
<a href="#"><img src="images/abt_fb.png" alt=""></a>
<a href="#"><img src="images/abt_tweet.png" alt=""></a>
<a href="#"><img src="images/abt_pin.png" alt=""></a>
<a href="#"><img src="images/abt_insta.png" alt=""></a>
</ul>
</div>
<div class="tab_Container">
<div id="tab1" class="tabContent">
<div class="abt_content abt_bespoke">
<img src="images/bespoke_contact.png">
<h3>BESPOKE SERVICES</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>1. Lorem Ipsum</p>
<p>2. Lorem Ipsum text</p>
<p>3. Lorem Ipsum is simply dummy text</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>If you have any questions, please get in touch with us on 0111 222 3000 or email <a href="">info@alterlondon.com</a></p>
<p>*Our showroom is closed on Saturdays and Sundays so no collections can be made on this friday. For full opening time please our <a href="contactus.html">Contact</a> page</p>
</div>
</div>
Dynamic Content:
<div class="tab1 uk_delivery">
<div class="tabBox">
<div class="tabs_menu">
<h4>UK DELIVERY</h4>
<ul class="tabs">
@foreach($bespoke_landing as $landing)
<li class="active"><a href="#">{{$landing['slug']}}</a></li>
<hr>
@endforeach
<a href="#"><img src="{{URL::to('/')}}/template/default/images/abt_fb.png" alt=""></a>
<a href="#"><img src="{{URL::to('/')}}/template/default/images/abt_tweet.png" alt=""></a>
<a href="#"><img src="{{URL::to('/')}}/template/default/images/abt_pin.png" alt=""></a>
<a href="#"><img src="{{URL::to('/')}}/template/default/images/abt_insta.png" alt=""></a>
</ul>
</div>
<div class="tab_Container">
<div id="tab1" class="tabContent">
<div class="abt_content abt_bespoke">
@foreach($bespoke_landing as $landing)
<img src="{{URL::to('/')}}/uploads/home/bespoke_landing/originals/{{$landing['image']}}">
<h3>{{$landing['slug']}}</h3>
<p>{{$landing['description']}}</p>
@endforeach
</div>
</div>
</div>
</div>
Last updated
2 years ago.
Sign in to participate in this thread!
Laravel
Laravel News
Laracasts
Laravel Podcast