How can i switch tabs with the links?
This is my current state
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li class="">
Sources
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
I can switch between tabs just fine but when i try to make it so that the href lead to another link, it doesn't work. when i change
Home
to
Home
it doesn't work. but then i tried removing the data-toggle and it opens the link but it doesn't show that the tab is active.
Remove the data-toggle and replace it with class="active"
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Sources</li>
<li>Contact Us</li>
</ul>
</div>
</div>
There could be two issues
1. bootstrap.min.js file is not added to the page
2.Specify the data-toggle="tab" on each tab, as well as create a .tab-pane with unique ID for every tab and wrap them in .tab-content.
Codepen- http://codepen.io/nagasai/pen/JKEYod
I figured it out with using some php. here's my code
<div class="tabbable-panel">
<div class="tabbable-line">
<?php
$hom = #_URL.'/home.php';
$sorc = #_URL.'/sources.php';
$cont = #_URL.'/contact.php';
$link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"
?>
<ul class="nav nav-tabs">
<li class="<?php if($link==$hom){echo "active";}else{echo "";} ?>">
Home
</li>
<li class="<?php if($link==$sorc){echo "active";}else{echo "";} ?>">
Sources
</li>
<li class="<?php if($link==$cont){echo "active";}else{echo "";} ?>">
Contact Us
</li>
</ul>
</div>
</div>
and now it works perfectly
Related
I get the following error when I wrote some HTML code to build a nav bar.
Errors parsing template: Unexpected closing tag "li". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
`<li>Recipies</li>
<li><a href="#">Shopping List/a>[ERROR ->]</li>
</ul>
<ul class="nav navbar-nav navbar-right"> "): `
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class='navbar-brand'>Recipe Book</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-new">
<li>Recipies</li>
<li><a href="#">Shopping List/a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<ul class="dropdown-menu">
<li>Save Data</li>
<li>Fetch Data`</li>
</ul>
</li>
</ul>
</div>
</div>
Can anyone help and explain what is wrong ?
You have a typo
<li><a href="#">Shopping List/a></li>
missed the left bracket
<li>Shopping List </li>
<li>Fetch Data ` </li>
On your second list item you've a backtick alone behind the "data" word
How to prevent Yii2 from compiling commented code.
I am new to yii2 and I need to comment some code for later use. Of course the commented code is not working (And that is why it is commented for now) but yii2 prompts errors from amongst them.
<ul class="nav nav-tabs">
<li class="active">
آمار
</li>
<li>
مشخصات
</li>
<!--
<li>
سفارش ها: <?=$model['dataProviderCourierOrders_totalConut']?>
</li>
-->
<li class="disabled">
پیام ها
</li>
</ul>
I get:
Undefined Index: dataProviderCourierOrders_totalConut
Is there a way to stop the commeted code from getting processed in yii2?
You should use the proper comment for php too eg:
<ul class="nav nav-tabs">
<li class="active">
آمار
</li>
<li>
مشخصات
</li>
<!--
<li>
<a href="javascript:void();" id="link_customer_orders">سفارش ها:
<?php // echo $model['dataProviderCourierOrders_totalConut'] ?> </a>
</li>
-->
<li class="disabled">
پیام ها
</li>
</ul>
First solution to comment html with php code show below example
use <?php /* Comment Html or PHP Code Here */ ?> show below
<ul class="nav nav-tabs">
<li class="active">
آمار
</li>
<li>
مشخصات
</li>
<?php /*
<li>
سفارش ها: <?=$model['dataProviderCourierOrders_totalConut']?>
</li>
*/ ?>
<li class="disabled">
پیام ها
</li>
Second solution to comment only php code show below example
use <?= PHP Code ?> to <?php // PHP Code ?> show below
<ul class="nav nav-tabs">
<li class="active">
آمار
</li>
<li>
مشخصات
</li>
<!--
<li>
سفارش ها: <?php // $model['dataProviderCourierOrders_totalConut'] ?>
</li>
-->
<li class="disabled">
پیام ها
</li>
Refer Yii 2 Core Framework Code Style maybe help full to you
I'm relatively new to web development, and I'm using Materialize for the project I'm working on right now. My navbar code is attached, for some reason I can click on and follow the links in the sidebar, but not in the nav-content tabs. When I take out the tabs tabs-transparent classes in the ul, it works, but it looks ugly. I am loading JQuery- that was the only resolution I saw to this problem when I googled.
<nav class="blue-grey lighten-1 nav-extended" role="navigation">
<div class="nav-wrapper">
<a id="logo-container" href="#" class="brand-logo center"><img src="/application/static/application/colorondarknotext.png" height=60px/></a>
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Welcome, (USERNAME)!<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Welcome, (USERNAME)!<i class="material-icons right">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul>
<li>Account Info</li>
<li>Log Out</li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<div class="divider"></div>
</li>
<li>Application</li>
<li>Decisions</li>
<li>Travel Information</li>
</ul>
<i class="material-icons">menu</i>
</div>
<div class="nav-content hide-on-med-and-down">
<ul class="tabs tabs-transparent">
<li class="tab">Application</li>
<li class="tab">Decisions</li>
<li class="tab">Travel Information</li>
</ul>
</div>
</nav>
I've run into a series of issues like this.
Generally you need to look deeper in the docs. In this case the navbar component docs don't address the issue in their example code. You need to look under javascript>tabs section of the docs to uncover more details about how the tabs work.
http://materializecss.com/tabs.html#external
By default, Materialize tabs will ignore their default anchor behaviour. To force a tab to behave as a regular hyperlink, just specify the target property of that link!
The normal anchor (<a>) functionality is disabled/ignored. In order to make your links work like "normal" you need to add a target attribute to your links.
Assuming you want to open the links in the same window, you would add target="_self" to each <a> tag.
<li class="tab">Application</li>
<li class="tab">Decisions</li>
<li class="tab">Travel Information</li>
Hello so basically I want to make an hidden page/tab that will only show for a specific IP
<ul class="right" id="menu">
<li>
<a class="selected" href="#msg">TEST</a>
</li>
</ul>
You'll need some PHP for this.
<?php
// The <ul> is only showed for this IP adress
if($_SERVER["REMOTE_ADDR"]=='0.0.0.0'){ ?>
<ul class="right" id="menu">
<li>
<a class="selected" href="#msg">TEST</a>
</li>
</ul>
<?php } ?>
What is the problem with this code below..
everything is working except menu drop down.
<div class="navbar">
<div class="navbar-inner" >
<div class="container">
<ul class="nav">
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Web Design</li>
<li>Web development</li>
<li>Wordpress Theme development</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li > Hello, <?php echo "Admin"; ?> </li>
</ul>
</div>
</div>
You are missing a at the bottom. Otherwise everything seems to be fine.