I am generating all menu link dynamically using Thymeleaf. I have written code which is working fine.
<ul>
<li th:each="menu : ${menus}">Home</span></li>
</ul>
My question is, how can I add a class (activeMenu) on li element if menu's value is equal to Home.
Usually you would insert this part in the element that you want to insert specific class, in your case span element:
th:class="${menu}=='Home' ? activeMenu"
or:
th:class="${menu}=='Home' ? activeMenu:''"
it should work like this:
<ul>
<li th:each="menu : ${menus}">th:text="${menu}">Home</span></li>
</ul>
I have not tried this specific condition, but it should work.
Hope this helps.
Related
I am using Dotclear blog software, which provide a widget for the blog categories with a resulting code looking like this:
<div class="widget categories ">
<h3>Catégories</h3>
<ul>
<li>Cat1</li>
<li>Cat2
<ul>
<li>Subcat1</li>
</ul>
</li>
<li>Cat3
<ul>
<li>Subcat2</li>
</ul>
</li>
<li>Cat4</li>
</ul>
</div>
What I am trying to achieve here is using the <a> tag (for Cat2 or Cat3) as header (or a dynamically added <h4> around it) and fold the subcategory list. If I call the accordion like this :
$(".categories").accordion({
header: "li:has(ul) > a",
});
the accordion does work, but when I click on the link it just folds/unfolds the item and doesn’t let me go to the link target (the category page, that is).
I tried wrapping the <a> in an <h4> tag and use that tag as header, but it doesn’t seem to make a difference. Is there a way to do what I seek or should I abandon the idea of collapsing subcategories and have functioning links within the header ?
Thanks for your time.
Well, after reading your comments, I realized I was using the wrong tool to achieve my objective. I have replaced jquery-ui’s accordion with a treemenu jQuery plugin which is actually made for my use. Sorry to have wasted your time and thanks for your kind answers.
I am using PHP Simple HTML DOM Parser and there is a section in the html page with the following source:
<div class="box-content padding-top-1 padding-bottom-1 font-size-3">
<ul>
<li>
linkdescription 1
</li>
<li>
linkdescription 2
</li>
</ul>
</div>
How can I now get the list of links with using the stacked class identifier?
Here's what I've currently tried:
List item $html->find('.box-content padding-top-1 padding-bottom-1 font-size-3'));
returns empty
List item $html->find('.box-content'));
returns other page elements in a box
List item $html->find('.box-content+padding-top-1+padding-bottom-1+font-size-3'));
never mind :(
For targeting an element with multiple classes, use dot (.) as the separator between classes. Spaces indicate a parent -> child relationship.
So, in your example, you would need:
List item $html->find('.box-content.padding-top-1.padding-bottom-1.font-size-3'));
Or you can try this:
List item $html->find('div[class=box-content padding-top-1 padding-bottom-1 font-size-3]');
I am using HTML4.01 Strict, CSS3 and the latest JQuery.
I have three identical lists in one page - one acts as a menu bar, the other two are smaller and appear on either side of the main page content.
I would like it so that when any single option in one list is selected, it also selects the same option in the other two lists.
'Selection' in this case means the application of the class "active_tab" [via .addClass("active_tab") ]
The list:
<ul id="lt-menu" class="shift_menu">
<li class="li_tab">Home</li>
<li class="li_tab">News</li>
<li class="li_tab">Info</li>
<li class="li_tab">Download</li>
<li class="li_tab">Contact</li>
<li class="li_tab">Shop</li>
</ul>
I have been attempting to use something along these lines -
$(".tab, .li_tab").click(function() {
$(".active_tab").removeClass("active_tab");
$("li".contains(this)).addClass("active_tab");
});
But with no luck so far.
I'm pretty new to JQuery, so any help at all would be much appreciated.
Il tried this with 3 copies of your list (I just change the ID), and it works:
$(".tab, .li_tab").click(function() {
//Disable current selection
$(".active_tab").removeClass("active_tab");
// We get the index of the <li> in the current list
// Each <li> has to be to the same index in the other lists
var index = $(this).index();
// We add the 'active_tab' class to all <li> with the same index
// Assume that all lists have the 'shift_menu' class, of modify the selector
$('.shift_menu').find('li:eq(' + index + ')').addClass("active_tab");
});
Hope it works for you...
I'm trying the render an HTML list that looks like the following, using the Razor view engine:
<ul>
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
</ul>
The code that I am attempting to use to render this list is:
<ul>
#foreach (var item in Model.TheItems)
{
<li id="item_#item.TheItemId">Item #item.TheItemId</li>
}
</ul>
The parser is choking, because it thinks that that everything to the right of the underscore in the id attribute is plain text and should not be parsed. I'm uncertain of how to instruct the parser to render TheItemId.
I don't want to but a property on the model object that includes the item_ prefix.
I also have to keep this syntax as I am using the list with JQuery Sortable and with the serialize function that requires the id attribute to be formatted in this syntax.
You should wrap the inner part of the call with ( ):
<li id="item_#(item.TheItemId)">
How about using String.Format? like this:
<li id="#String.Format("item_{0}", item.TheItemId)">
I prefer:
<li id="#String.Concat("item_", item.TheItemId)">
The verbosity tells the support developers exactly what is happening, so it's clear and easy to understand.
You can even use this way to concat more strings:
<li id="#("item-"+item.Order + "item_"+item.ShopID)" class="ui-state-default"></li>
Here is another post.
Hope helps someone.
You can so this in a simpler way:
id="item_#item.TheItemId"
This post seems to be older but now this does works now in latest MVC:
id="item_#item.TheItemId"
What is the strategy in smarty for using different variables each time a template is included in another template?
Here is what I mean.
I have a smarty template that creates a simple navigation list.
<ul class='linkList'>
<li>
<h3>{$title}</h3>
<ul>
{foreach $links as $d}
<li><a title='{$d...}' href='{$d....}'>{$d.text}</a></li>
{/foreach}
</ul>
</li>
</ul>
I want to include it a number of times in my main template and each time pass it different values. Im not sure what strategy to use to do this.
If I assign variables in my php file like this
$smarty->assign('links',array(.....);
$smarty->assign('title','My first link list');
$smarty->assign('links',array(different values);
$smarty->assign('title','My second link list');
and then include the template twice i will just get the same list twice with the second lot of values.
The {include} tag allows you to pass variables in the call:
{include 'linklist.tpl' title="Sample Links 1" links=$link_array1}
{include 'linklist.tpl' title="Sample Links 2" links=$link_array2}
Otherwise, I'm pretty sure you can use either {assign} or the short form of assign ({$var=value}) before including the template.