My view is like this :
<ul class="nav nav-tabs nav-cat">
#foreach($countries as $country)
<li role="presentation" class="{{ $loop->first ? 'active' : '' }}">{{ ucfirst($country->name) }}</li>
#endforeach
</ul>
I want add class="active" in li tag. So, when the tab clicked, the li tag will active
How can I do it?
You can use v-for to loop through a variable in vue.js and use index to check for the first element. Use v-bind:class to apply a class dynamically. The correct solution for doing this should be:
<ul class="nav nav-tabs nav-cat">
<li v-for="(country, index) as {$countries}" role="presentation" :class="{index == 0 : 'active'}">{{ ucfirst(country.name) }}
</li>
</ul>
Using JQuery:
$("#ID").addClass("active");
Using Javascript:
document.getElementById("ID").className += " active";
Related
I am using ui-sref-active="active" to make the selected <li> tag active but I want a list tag to be active as default out of three list tags
<li ui-sref-active="active" class="item active"><a data-ng-click="search.status = ''" href="">ALL PROJECTS</a></li>
<li ui-sref-active="active"><a data-ng-click="search.status = 'PORTFOLIO'" href="">PORTFOLIO</a></li>
<li ui-sref-active="active"><a data-ng-click="search.status = 'CATEGORY'" href="">NOTIFICATIONS</a></li>
I want the first list tag to be active by default and then when user clicks on anyother list tag it should deactivate and activate other list tag
I am using this directive: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active
you can use ng-class to dynamically turn class 'active' on and off.
<li ui-sref-active="active" ng-class="{active: activeTab1}"><a data-ng-click="search.status = ''" href="">ALL PROJECTS</a></li>
<li ui-sref-active="active" ng-class="{active: activeTab2}"><a data-ng-click="search.status = 'PORTFOLIO'" href="">PORTFOLIO</a></li>
<li ui-sref-active="active" ng-class="{active: activeTab3}"><a data-ng-click="search.status = 'CATEGORY'" href="">NOTIFICATIONS</a></li>
In your controller you can switch the activeTab1,2 and 3 on and off based on which list tag the user clicks. You can set activeTab1 true by default.
UPDATED
added {} in ng-class because of the syntax
Here is a working example in Plunker
I have Menu list which contains Sub-Menu as shown in the code below.
<li class="current">
<span class="icon4"></span>Subscriptions
<ul class="sub-menu">
<li>View Subscriptions
</li>
<li class="#((ViewBag.PageName == " Subscription ") ? "active " : " ")">Manage Subscription Plans
</li>
</ul>
</li>
<li class="current">
<span class="icon5"></span>Administration
<ul class="sub-menu">
<li class="#((ViewBag.PageName == " AssetPage ") ? "active " : " ")">Assets
</li>
<li>Configure Text
</li>
<li>Error Log
</li>
<li>Product Settings
</li>
</ul>
</li>
<li class="current">
<span class="icon6"></span>Promo Codes
<ul class="sub-menu">
<li>Manage Promo Code
</li>
<li>Used Promo Code
</li>
</ul>
</li>
Here Subscription,Administration,Promo Codes are Menu Lists which contains Sub-Menu Lists under them.
The thing is I want to apply class=current dynamically when a user clicks on Subscription,Administration,Promo Codes`.
And I am doing this in LayoutPage of MVC.
Any help will be appreciated.
Here you have a working solution: https://jsfiddle.net/c4h3sup9/
You have to use a little bit of Javascript for that.
You have to give the listitems a other class name like in my example "operator"
document.body.addEventListener("click", function(e){
if(e.target && e.target.className == "operator"){
var actives = document.getElementsByClassName("active");
actives[0].setAttribute("class", "operator");
e.target.setAttribute("class", "active");
}
});
for this example you need to assing one element as active from the beginning.
Note:
LI elements are never parents of UL.
The order is:
Unordered List (Plural) -> List item (Singular, Child).
You might want to correct that as it is not standard conform.
To add the class name to the parent <li> element, give the main links a class name. Assuming you also want to remove it from any <li> elements that already have it, also give them a class name
<li class="container">
<span class="icon4"></span>Subscriptions
and the script will be
$('.mainmenu').click(function() {
$('.container').removeClass('current'); // remove any previous
$(this).closest('.container').addClass('current');
});
In addition, if when you navigate to one of the views with this layout, and what to add the class name to the appropriate element, then you can give the <li> elements an id attribute
<li id="subscriptions" class="container">
....
</li>
<li id="administration" class="container">
....
and in the GET method, pass the value of the id to the view (e.g. using ViewBag
public ActionResult ConfigureText()
{
ViewBag.Menu = "administration";
....
return View(...);
}
and add a script that runs when the page first loads
var menu = '#ViewBag.Menu";
$('#' + menu).addClass('current');
I need to remove the selected class of an <a> and assign it the last <a> instead. Both are nested within individual <li> elements.
Here's an example of the code:
<ul class="tabs clearfix">
<li class="tab">Home</li>
<li class="tab">About</li>
<li class="tab">Profile</li>
<li class="tab">History</li>
<li class="tab">The Beginning of V-Cube</li>
</ul>
How can I achieve this using JavaScript/jQuery? Please advise.
EDIT:
Let's say I don't want to target the last tab specifically. Can the href be used as a selector instead?
EDIT #2:
Thank you so much everyone for the quick response. All your answers were spot on, wish I could mark them all as answers :)
To remove class from an element, use removeClass.
To get the last element, use :last selector or last(). To add new class to element use addClass
$('.selected').removeClass('selected');
$('.tabs li:last a').addClass('selected');
// OR
// $('.tabs li').last().children('a').addClass('selected');
.selected {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs clearfix">
<li class="tab">Home
</li>
<li class="tab">About
</li>
<li class="tab">Profile
</li>
<li class="tab">History
</li>
<li class="tab">The Beginning of V-Cube
</li>
</ul>
Update
Let's say I don't want to target the last tab specifically. Can the href be used as a selector instead?
$('.tabs a[href="#five"]').addClass('selected');
Try this.
$(".tabs li").first().find("a").removeClass("selected");
$(".tabs li").last().find("a").addClass("selected");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs clearfix">
<li class="tab">Home</li>
<li class="tab">About</li>
<li class="tab">Profile</li>
<li class="tab">History</li>
<li class="tab">The Beginning of V-Cube</li>
</ul>
Try this:
$(document).ready(function(){
var classname = $(".tabs li:first-child a").attr("class");
console.log(classname);
$(".tabs li:last-child a").addClass(classname);
$(".tabs li:first-child a").removeClass();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="tabs clearfix">
<li class="tab">Home</li>
<li class="tab">About</li>
<li class="tab">Profile</li>
<li class="tab">History</li>
<li class="tab">The Beginning of V-Cube</li>
</ul>
it is quite easy also in vanilla JS:
document.querySelector('.selected').classList.remove('selected');
document.querySelector('.tabs li:last a').classList.add('selected');
If you want to use an arbitrary a and select the attribute href then you should use this selector:
a[href="HREFVALUE"]
$('.clearfix').find('.selected').removeClass('selected');
$('.clearfix').find('li:last').find('a').addClass('selected');
$("a[href$='five']").addClass('bold');
.selected {
color: red
}
.bold {
font-weight: bold
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs clearfix">
<li class="tab">Home
</li>
<li class="tab">About
</li>
<li class="tab">Profile
</li>
<li class="tab">History
</li>
<li class="tab">The Beginning of V-Cube
</li>
</ul>
Just use .removeClass() and .addClass()
.removeClass()
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
.addClass()
Description: Adds the specified class(es) to each element in the set of matched elements.
I have a list of li items with functions attached to them. I also have an event listener which attaches a class of "current" to whichever li item is being clicked.
HTML
<ul class="cf" id="filter">
<li ng-click="getRadius(5)" class="current">5 km</li>
<li ng-click="getRadius(10)">10 km</li>
<li ng-click="getRadius(25)">25 km</li>
<li ng-click="getRadius(50)">50 km</li>
<li ng-click="getRadius(100)">100 km</li>
</ul>
Is there a way to disable the ng-click event if that specific li item has a class of "current" or is there a better way to go about this?
You cannot disable a list cause its not a interactive element can use ngClass to apply a specific class when disabled to make it appear disabled:
<li ng-class="{'disabled':condition}"ng-click="getRadius(5)">item</li>
You can use ng-if to remove those items completely from the list:
<li ng-if="!condition" ng-click="getRadius(5)">item</li>
<li ng-if="condition" >item</li>
If you use button tag as trigger instead of li, you can use ng-disabled directive to permit click by a condition. For example:
<ul class="cf" id="filter">
<li><button ng-click="getRadius(5)" ng-disabled="current!=5">5 km</button></li>
<li><button ng-click="getRadius(10)" ng-disabled="current!=10">10 km</button></li>
<li><button ng-click="getRadius(25)" ng-disabled="current!=25">25 km</button></li>
<li><button ng-click="getRadius(50)" ng-disabled="current!=50">50 km</button></li>
<li><button ng-click="getRadius(100)" ng-disabled="current!=100">100 km</button></li>
</ul>
If you want, you can customize button style and you can show it like a standart text element.
.cf button {
border: none;
background: none;
}
// template
<ul class="cf" id="filter">
<li ng-click="!clickLi[5] && getRadius(5)" class="current">5 km</li>
<li ng-click="!clickLi[10] && getRadius(10)">10 km</li>
<li ng-click="!clickLi[25] && getRadius(25)">25 km</li>
<li ng-click="!clickLi[50] && getRadius(50)">50 km</li>
<li ng-click="!clickLi[100] && getRadius(100)">100 km</li>
</ul>
// controller
function MyController($scope) {
$scope.clickLi = {
5: true
};
$scope.getRadius = function(li_id) {
$scope.clickLi[li_id] = true;
console.log(li_id);
};
}
A demo on JSFiddle.
Possible workaround:
If you need a single selection you can add variable into the scope specifying which row is selected and generate your list with the ng-repeat, then you can add lazy checking on ng-click if current $index is equal to selected index, you can use the same condition to apply current class with ng-class.
For example:
app.js
$scope.selected = 0;
$scope.distances = [5, 10, 25, 50, 100];
app.html
<ul class="cf" id="filter">
<li ng-repeat = "distance in distances" ng-click="($index == selected) || getRadius(distance)" ng-class="{'current':($index == selected)}">{{distance}} km</li>
</ul>
<ul class="nav nav-pills nav-stacked" id="moduleList">
<li class="">
User</li>
<li>
Blog
</li>
</ul>
I have the above bootstrap pill in my website. The active item changes and the script execute to load the active item in the page. In some condition I don't want to change the active item and the decision will be made inside the onclick function loadModule(). How can I do that?
Remove data-toggle="pill" from your markup, then change the class of the selected 'li' to active or empty within 'loadModule'. Here's an example:
function loadModule(a) {
//your logic/////
$('#liUser').attr('class', '');
$('#liBlog').attr('class', 'active');
}
<ul class="nav nav-pills nav-stacked" id="moduleList">
<li id="liUser" class="">
User
</li>
<li id="liBlog">
Blog
</li>
</ul>
I don't know if is useful for you. Try this using jQuery:
$(document).delegate('.nav-pills li a', 'click', function () {
$('.nav-pills li').removeClass('active');
this.parent().addClass('active');
});
Then remove click and data-toggle attributes. You can add some logic inside of delegate callback.