Suppose I have a navigation menu that works by using Javascript to hide or show the respective div.
<ul>
<li>Home</li>
<li>Contact Me</li>
</ul>
<script>
$("#tabs a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
</script>
I know I should be using the <noscript></noscript> tag to facilitate users who do not have Javascript enabled.
Question
How should I go about doing this?
For javascript disabled users, I want to allow them to click "Home" or "Contact Me" and be taken to "home.php" or "contact.php" respectively.
This should work:
<ul>
<li><a data-target="#home" href="home.php">Home</a></li>
<li><a data-target="#contact" href="contact.php">Contact Me</a></li>
</ul>
<script>
$("#tabs a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).data('target');
$(toShow).show();
});
</script>
With noscript you can add another menu, but can't change available one. Having something like above, people with no js will not trigger click handler and default get will be executed. If js is enabled, click function will be executed and e.preventDefault will stop browser from redirect to another page.
This solution also does not require duplicated menus. Once you need to change it somehow, you will need to change HTML of two menus actually, not one.
Please note that this is a quick trial, code is UNTESTED
Leave the links to the full pages in the anchors, and remove the ".php" programmatically
<ul>
<li>Home</li>
<li>Contact Me</li>
</ul>
<script>
$("#tabs a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
toShow=toShow.split(".");
toShow=toShow[0];
$("#"+toShow).show();
});
</script>
Like this:
<ul id="scriptMenu" style="display:none">
<li>Home</li>
<li>Contact Me</li>
</ul>
<noscript>
<ul>
<li>Home</li>
<li>Contact Me</li>
</ul>
</noscript>
<script>
$(function(){
$("#scriptMenu").show()
});
</script>
scriptMenu will be hidden on browsers that don't support JavaScript.
Browsers that do support JavaScript will not render the elements in the tag, and will show the scriptMenu list.
Working example
What about adding the actual link as the href in the "a" tag, and then in the jQuery add return false at the end. This stops the browser executing the link specified in the href element if the Javascript was triggered. If Javascript isn't enabled they just link to the href element. No need for noscript.
<ul>
<li>Home</li>
<li>Contact Me</li>
</ul>
<script>
$("#tabs a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
return false;
});
</script>
Related
I'm trying to create a list in HTML where each item in the list can be clicked.But I need to know the ID of the item that was clicked.
I have been trying to have a div surround the list item and have an onClick and a ID tag associated. Then get the ID tag from the synthetic event.
But my list items are complex so they have sub DOM elements. Meaning if I click the <p> it will not return the ID associated with the div tag.
I'm not sure what the best would be to do this? strong text
Here are some solutions you can reference:
If using jQuery, try this api: ele.closest("div") to get the outer div tag
Study the javascript event popup and catch, after that you will get the answer
This question got very good answer here: JavaScript - onClick to get the ID of the clicked button
Orginally it demonstrates button click but you can use it for your li element (or any element) that you wish.
Good luck!
let li = $("li");
li.on("click", getId);
function getId(e) {
e.stopPropagation();
let id = $(this).attr("id");
console.log(id + " was clicked!");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="element_1">1. Click me</li>
<li id="element_2">2. Click me
<ul>
<li id="element_2.1">2.1. Click me</li>
<li id="element_2.2">2.2. Click me</li>
<li id="element_2.3">2.3. Click me</li>
</ul>
</li>
<li id="element_3">3. Click me</li>
<li id="element_4">4. Click me</li>
</ul>
I hope this helps and if i understood you question correctly
in your HTML you can try this
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
and in jquery try this
$(document).on("click", ".test", function (e) {
e.preventDefault();
alert($(this).attr("id"));
});
I have a simple open/close responsive menu that uses jQuery. The menu works just fine but the website I'm using it on is a simple single page site with different sections. My problem is the menu opens and closes when the user clicks the menu handle and I'd like it to close when the user clicks on a menu item also. I have very little experience in jQuery so I need help solving this problem.
The HTML:
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="handle">Menu</div>
</nav>
The jQuery:
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
Thank you.
I think you need this:
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
$('nav ul a').on("click", function(){
$('nav ul').removeClass('showing');
});
I also noticed your HTML structure is wrong...
The <li> should be child of <ul>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="handle">Menu</div>
</nav>
Working fiddle ==> https://jsfiddle.net/osd4nn1n/
You can change the toggleClass to just toggle to hide the elements. To get the behavior you'd like, change your jQuery selector to:
$('.handle, nav ul a').on('click', function(){
$('nav ul').toggle();
});
I have a menu with several options, I would like to know how to load different HTML into the same div (called #content) depending on the buttons you press of the menu.
I have this code for the menu:
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
<li>Biographie</li>
<li>Discographie</li>
</ul>
</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</div>
What do I need to do to send, for example, "index.html" into div#content when I press in the menu the option "Accueil"?
Using jQuery ajax you can do it
HTML
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
</div>
JAVASCRIPT(jQuery)
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#content').load(page_url);
});
});
jQuery load
You can use jQuery, it makes stuff like this easy:
Then you can do this:
$('#content>div').load('index.html');
You can either put this in onclick on some button, or in other place in your javascript code...
A JQuery UI Tab that inherits from a JQuery Theme and redirects (HTTP GET) to a new page is the goal.
I'm 90% there using the following code, but the compromise has been to put the target URL in the anchor TITLE (the Tab widget expects the HREF to be a local page selector).
This works, but for SEO purposes I'd like the HREFs to be actual URLs to ensure search engines will follow and index them.
Thoughts?
<script>
$(function () {
$("#tabs").tabs();
$(".nav-link")
.click(function () {
window.location = this.title;
});
});
</script>
<div id="tabs">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
</div>
If you make sure that you follow certain HTML structure, you can do something like,
<div id="tabs">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
<!-- Make sure that your DIVs are called 'tabs-0', 'tabs-1' etc. 'tabs-0' will be referred by first link, tabs-1 will be referred by second link, so on and so forth. -->
<div id="tabs-0"></div>
<div id="tabs-1"></div>
</div>
If your HTML structure looks like this, you can do:
<script>
$(function() {
var tabId = '#tabs';
$(tabId + ' a').each(
function(index, val)
{
$(this).attr('href', tabId + '-' + index);
}
);
$("#tabs").tabs();
});
</script>
Now, search engine will see those links where as user will see your regular tab behavior.
I'm confused as to why this must be done through jquery. If you just want a Http Get redirect, that's what <a href=""> tages were designed to do.
i have a navigation menu on top of my website .that li's content many pages with different urls. How to Add Active Class to a Navigation Menu Based on URL that in each page display it with a specific color?
<ul>
<li class="red">HOme</li>
<li>gallery</li>
<li>about</li>
<li>contact</li>
</ul>
This snippet will be useful
HTML
<ul id="menuList">
<li>Home</li>
<li>gallery</li>
<li>about</li>
<li>contact</li>
</ul>
JS
$('#menuList li').click(function(e){
e.preventDefault(); //Remove this in your main code
$('#menuList li').removeClass("active");
$(this).addClass("active");
});
CSS
.active{
background-color:green;
}
WORKING EXAMPLE
Give a class or ID to the ul. Then, assuming jQuery and an ID of nav:
$(function() {
$('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
All you need then is to style the .active class. Also, this assumes your links are /my-page, so if you are currently in my-page, the link will become .active.