I want a vertical tab menu using css that will appear like ajax control toolkit tab container.Please see the second example in the link.
I need to achieve this with css without having to use ajax control toolkit.
You can look at the CSS it produces and make a jQuery script to control the states, like so:
$(document).ready(function() {
var tabs = $('div.tabs > div');
tabs.hide().filter(':first').show();
$('ul.tab_nav li a').click(function() {
tabs.hide();
tabs.filter(this.hash).show();
$('ul.tab_nav li a').parent().removeClass('selected');
$(this).parent().addClass('selected');
return false;
}).filter(':first').click();
}
With some HTML like:
<ul class="tab_nav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tabs">
<div id="tab-1">
Tab 1
</div>
<div id="tab-2">
Tab 2
</div>
</div>
Related
I have a menu including the following li
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp">ABC</li>
</ul>
</div>
In this code, home page is actived. But want to enable active status when I click on my News page. How Can I do? Thanks for watching.
Please add Js like:
jQuery(document).ready(function () {
jQuery('.menu li a').click(function () {
//removing the previous selected menu state
jQuery('.menu li').find('a.active').removeClass('active');
//adding the state for this parent menu
jQuery(this).addClass('active');
});
});
a.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp">ABC</li>
</ul>
</div>
You can use jQuery to do so, use the script below:
$(document).ready(function () {
$('.menu ul li a').click(function () {
// This will remove active class from other links
$('.menu ul li').find('a.active').removeClass('active');
// This will add active class to the link clicked
$(this).addClass('active');
});
});
Here is code using pure javascript
화이팅!!
function change(elem){
var list = document.querySelectorAll(".menu ul li a");
for (var i = 0; i < list.length; ++i) {
list[i].classList.remove('active');
}
elem.classList.add('active');
}
.active{
color:red;
}
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>ABC</li>
</ul>
</div>
With some JS or JQuery , Add a click event on your links and call a method
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp" click="MyMethod">ABC</li>
</ul>
</div>
and in Jquery(or JS) :
perform this :
YourLinkClicked.removeClass('active');
YourLinkClicked.addClass('active');
Or just look at this link : http://jsfiddle.net/designaroni/E53t9/
Modifying #לבני מלכה's answer to
a) Be a11y
b) Work with frameworks (like svelte)
c) Use events instead of the element itself (better for accessibility).
d) Have JSDoc Comments (for whoever must revise my code when this is old and non-modern).
Here is the HTML markup (pure HTML) :
<div class="navbar">
<ul>
<li><a onclick="change(e)" class="active">Link 1</a></li>
<li><a onclick="change(e)">Link 2</a></li>
</ul>
</div>
Pure JS (w/ JSDoc):
/**
* This function is used in the navbar. It gives styles to the active link.
* #param {Event | Undefined} e Event (click event).
*/
const change = (e) => {
if (!e) e = window.event; // <-- for Chrome <89, Firefox (I forgot versions), and Safari.
// If you have been used to JS for a bit, you may think that {} needs to be used above, but no. In modern JS, this is unnecessary. Of course, for multi-line if statements, you do need the brackets.
let list = document.querySelectorAll(".navbar ul li a");
list.forEach(elem => {
elem.classList.remove("active");
});
// Note the below comment is only if you are using a type checker, if you aren't then you can remove this. (the comment).
// #ts-ignore
e.target.classList.add('active');
}
The best and easy way to do it:
Just listen event on parent of list (ul)
After click find old active element and remove class for it
Set active class for target of event
document.querySelector('ul').addEventListener('click', event => {
// remove old active
document.querySelector('.menu .active').classList.remove('active');
// set new active
event.target.classList.add('active');
})
a {
color: #ccc;
text-decoration: none;
}
.active {
color: blue;
}
<div class="menu">
<ul>
<li><a class="active">Home</a></li>
<li><a>News</a></li>
<li><a>ABC</a></li>
</ul>
</div>
Here is some basic function i use for my current MVC project.
Add this to the master page or shared pages, the js need to run each time the site reload.
and you need to use jquery
$(document).ready(function () {
// the current page url eg /index.jsp
var href = window.location.href.toLowerCase();
$(".menu").find("a").each(function () {
// find the current li that match the current Url
if (href.indexOf($(this).attr("href").toLowerCase()) != -1)
$(this).addClass("active"); // set the current li to active
})
})
.acive{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp">ABC</li>
</ul>
</div>
In Short
I need to be able to activate a menu on hover while I'm dragging a sortable object. Is this possible?
The context:
I have a nav menu that's being powered by cssmenu, which basically takes list items and arranges them into a nice clean menu structure. I'd like to connect the lists in the nav menu and be able to rearrange the elements with jqueryui sortable connected lists. I can get the connected lists to work separately (outside of the cssmenu) and within one menu of a particular list. The problem is when I try to drag from one menu item to another, the drop-down isn't activated.
You can see in this fiddle that I can sort objects within a list but I can't activate the drop-down menu to drag it into another list (i.e. drag from the yellow list to the blue list or vice versa):
http://jsfiddle.net/9j5wyoLn/
html
<div id='cssmenu'>
<ul id='subNavElements'>
<li class='active has-sub'><a href='#'><span>About Us</span></a>
<ul id="sortable1" class="connectedSortable">
<li class="">Item 1</li>
<li class="">Item 2</li>
<li class="">Item 3</li>
<li class="">Item 4</li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Articles</span></a>
<ul id="sortable2" class="connectedSortable">
<li class="">Article 1</li>
<li class="">Article 2</li>
<li class="">Article 3</li>
<li class="">Article 4</li>
</ul>
</li>
</ul>
</div>
js
//make sortable
$(document).ready(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
css: handled in fiddle (too much to show below)
Figured it out...
I added a class in the css called "openSaysMe" which styles the elements to appear.
#cssmenu .openSaysMe {
left: auto;
top: 34px;
opacity: 1;
}
Then I added the class when the items are being sorted, took the class away once the sorting was complete.
$( "#sortable1, #sortable2, #sortable3" ).sortable({
connectWith: ".connectedSortable",
sort: function( event, ui ) {
$('#cssmenu ul ul').addClass('openSaysMe');
},
beforeStop: function( event, ui ) {
$('#cssmenu ul ul').removeClass('openSaysMe');
}
}).disableSelection();
Here's a fiddle: http://jsfiddle.net/9j5wyoLn/2/
I would like to disable the nav-pill hover effect on just one item, the link that changes the language of the page, in my navbar. What is the best way to achieve this using either a bootstrap class or CSS?
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right">
<li class="language language-active disabled">NL</li>
<li class="language language-nonactive language-right">EN</li>
<li class="approach-li">Diensten</li>
<li class="about-li">Over ons</li>
<li class="qa-li">Vragen</li>
<li class="about-li">Contact</li>
<li class="navbarpadding">
<form action="afspraak.html">
<button class="btn navbar-btn btn-primary2">Afspraak maken</button>
</form>
</li>
</ul>
</div>
Looking at your html using the class: ".language-nonactive"
You can these styles to go along with it, this will remove the hover of the grey background:
.nav>li.language-nonactive>a:hover, .nav>li.language-nonactive>a:focus {
background-color: transparent;
}
Here is a jsfiddle to show what I've done:
http://jsfiddle.net/ho1sgm1e/
Additionally you could you something like this with jquery:
$(document).ready(function() {
/*disable non active tabs*/
$('.nav li').not('.active').addClass('disabled');
/*to actually disable clicking the bootstrap tab, as noticed in comments by user3067524*/
$('.nav li').not('.active').find('a').removeAttr("data-toggle");
});
source: Bootstrap tabs pills disabling and with jQuery
Furthermore, utilising the disbaled class will effectively disable the button.
Using CSS:
.nav .language-nonactive a:hover {
background:rgba(0,0,0,0);
}
Demo
I use markup to display a dropdown menu using Twitter Bootstrap.
<ul class="nav pull-right">
<li class="dropdown">
Menu <b class="caret"></b>
<ul class="dropdown-menu">
<li>Menu item 1...</li>
<li class="divider"></li>
<li>Menu item 2...</li>
<li>Menu item 3</li>
</ul>
</li>
</ul>
I want to be able to make menu items appear disabled, i.e. no hover effect and probably a different text decoration to make the disabled state visible to the user.
What is the best way to accomplish this? Is there an exisisting bootstrap css class I can add to the <li> or <a> element?
When outputing the code for a disabled drop down, why not simply use :
<li class='disabled'>
Menu
</li>
You can always add the caret back if you still want it to appear.
Update:
Adding W3Schools Link
You can attach a custom disabled class to your menu link a tag that you want to disable and simply remove the default action by using preventDefault and targetting that class, like so:
$(".disabled-link").click(function(event) {
event.preventDefault();
});
Then you can style all events from the .disabled-link with a grey backdrop or any style you like;
CSS
a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled-link:hover {
background-color:#d9d9d9 !important;
color:#aaa !important;
}
Demo
I prefer this (LESS):
/* Disable link */
a.disabled,
a.disabled:visited ,
a.disabled:active,
a.disabled:hover {
color: #999 ;
cursor: default;
}
.dropdown-menu {
a.disabled,
a.disabled:visited ,
a.disabled:active,
a.disabled:hover {
color: #999 ;
cursor: default;
background-color: white;
}
}
To disable the the dropdown use:
$('.dropdown-toggle').addClass('disabled');
To enable it back:
$('.dropdown-toggle').removeClass('disabled');
YES, Bootstrap has a predefined class with all necessary styling you need. You can simply add disabled class to whichever <li> you want
Just to add to Andres answer (don't have enough reputation to add comments :( ). You need to return false from the event handler or it might continue executing other handlers.
$(".disabled-link").click(function(event) {
event.preventDefault();
return false;
});
Similar to above you can use:
li.disabled > a {
color:#aaa !important;
}
This way you are keeping the same bootstrap default class for disabled links and implement the preventDefault() Javascript to disabled the link.
$(".disabled").click(function(event) {
event.preventDefault();
return false;
});
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
**<a class="dropdown-item disabled" href="#">Disabled link</a>**
<a class="dropdown-item" href="#">Another link</a>
</div>
Add .disabled to items in the dropdown to style them as disabled.
Source: www.getbootstrap.com
This might seem like an odd request but I'd like to use jQuery's Selectable tool to only select one item at a time and I'd like it to show me a value I'll have within each tag. At the very least I want the contents of that selection. Has anyone tried to do this? For some reason these little things seem to not be all that easily findable in their API for it.
If you only want one selection at a time, then why use selectable?
I would think you would just use jQuery, as it should be very easy. Or am I missing your point?
Live Example: http://jsfiddle.net/F7fsx/
HTML
<div id='container'>
<div id='one'>one</div>
<div id='two'>two</div>
<div id='three'>three</div>
</div>
CSS
#container div {
width: 50px;
height: 50px;
border: 2px dashed red;
margin: 10px;
color: white;
background:orange;
}
jQuery
$('#container div').click(function() {
$th = $(this);
$th.css('backgroundColor','yellow');
var value = $th.text()
alert(value);
});
A post from the jQuery Forum offers the following code to limit selection to a single item:
$("li").live("click", function(event) {
$(this).siblings().removeClass("selected");
$(this).addClass("selected");
});
As far as extracting data, here is the code that the jQuery UI team uses in the Serialize Demo, to extract data from each selected element:
$("#selectable").selectable({
stop: function(){
var result = $("#select-result").empty();
$(".ui-selected", this).each(function(){
var index = $("#selectable li").index(this);
result.append(" #" + (index + 1));
});
}
});
And the HTML markup is:
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
</ol>