We Keep Coding

Javascript change effect for <ul><li> is not working correctly

I am new to Javascript. I want to click on the Navi bar to change some effect(underline to the words)
Coding for HTML
<div class="nav" id="nav">
<ul>
<li>Home</li>
<li>text1</li>
<li>text2</li>
</ul>
</div>
<div id="text1"> <!--> jump to here<-->
.....
</div>
<div id="text2"> <!--> jump to here<-->
.....
</div>
<script>
function SetTabState(dom){
$("#nav ul li").find('.underline_text').removeClass('underline_text');
$(dom).addClass('underline_text');
}
</script>
Just like the screenshot, when clicking "text1" tab, the home underline is removed and "text1" underline is added...
However, for my coding, when clicking on "text1", the underline is not changing and remain at "home". Anyone knows the problem here? Thx!

This is because from your html
<a href="index.html#text2" onclick="SetTabState(this)">
this refer to <a>, so dom is actually an <a>
From your SetTabState(dom), dom suppose to be a <li>?
You can add a event delegation to the <ul> with delegate to the <li>, like
function SetTabState(dom) {
$("#nav ul li").find('.underline_text').removeClass('underline_text');
$(dom).addClass('underline_text');
}
$(document).ready(function() {
$("#nav ul").on('click', 'li', function() {
SetTabState(this)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav" id="nav">
<ul>
<li>Home</li>
<li>text1</li>
<li>text2</li>
</ul>
</div>
<div id="text1">
<!-->jump to here
<-->
.....
</div>
<div id="text2">
<!-->jump to here
<-->
.....
</div>

As others have said, the dom variable refers to the <a> element, but you're trying to remove the class from the <li>. Instead of using .find, you can directly select the element with the underline_text class:
<script>
function SetTabState(dom){
$("#nav ul li .underline_text").removeClass('underline_text');
$(dom).addClass('underline_text');
}
</script>

You can do like this :-
function SetTabState(dom){
$("#nav ul li a").removeClass('underline_text');
$(dom).addClass('underline_text');
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li a {
text-decoration: none;
}
ul li a.underline_text {
border-bottom: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav" id="nav">
<ul>
<li>Home</li>
<li>text1</li>
<li>text2</li>
</ul>
</div>

Because you need to change the state of the other elements rather than the only element you clicked, I suggest you use a function for the whole group of elements instead of handle click event on each element. This is my code:
function initClickableNav(nav) {
var navItems = nav.querySelectorAll('a');
var activeClass = 'underline_text';
nav.addEventListener('click', function (event) {
[].forEach.call(navItems, function (navItem) {
if (navItem === event.target || navItem.contains(event.target)) {
navItem.classList.add(activeClass);
} else {
navItem.classList.remove(activeClass);
}
});
});
}
initClickableNav(document.querySelector('#nav'));
HTML
<div class="nav" id="nav">
<ul>
<li><span>Home</span></li>
<li>text1</li>
<li>text2</li>
</ul>
</div>

onclick expand multiple menu

I want to make an onclick expand multiple menu in my website
Before I follow this thread: this with little bit modify I get:
<ul>
<rg><li id="auctions">Menu</li></rg>
<br></br>
<lf>
<li class="submenu">Left</li>
</lf>
<rg>
<li class="submenu">Right</li>
</rg>
</ul>
But it only shows a menu, then I create a duplicate like this:
<ul>
<rg><li id="auctions">Menu</li></rg>
<br></br>
<lf>
<li class="submenu">Left</li>
</lf>
<rg>
<li class="submenu">Right</li>
</rg>
</ul><ul>
<rg><li id="auctions2">Menu</li></rg>
<br></br>
<lf>
<li class="submenu2">Left</li>
</lf>
<rg>
<li class="submenu2">Right</li>
</rg>
</ul>
And JS and CSS like this:
<script>
$(function() {
$('#auctions').click(function(){
$('.submenu').slideToggle();
});
});
$(function() {
$('#auctions2').click(function(){
$('.submenu2').slideToggle();
});
});
</script>
<style>
.submenu{display:none;}
.submenu2{display:none;}
rg {float:right}
lf {float:left}
</style>
Its work but doesn't run inline. Then I useul {display:inline-block}
Yes, the menu running inline, but it's broken and float doesn't work properly. Can it's fixed? or can I make multiple menu in same <ul>?

make rg and lf as classes and change the html accordingly to get your desired style.
But I recommend, you should consider studying about ul and li tags and its properties before using it
$(function() {
$('#auctions').click(function() {
$('.submenu').slideToggle();
});
});
$(function() {
$('#auctions2').click(function() {
$('.submenu2').slideToggle();
});
});
ul {
display: block;
margin:0;
padding:0;
width:100%;
}
li {
list-style: none;
}
li.main {
width:100%;
text-align:right;
}
.submenu {
display: none;
}
.submenu2 {
display: none;
}
.rg {
float: right;
}
.lf {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<ul>
<li id="auctions" class="main rg">Menu</li>
<li>
<ul>
<li class="submenu lf">Left</li>
<li class="submenu rg">Right</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li id="auctions2" class="main rg">Menu</li>
<li>
<ul>
<li class="submenu2 lf">Left</li>
<li class="submenu2 rg">Right</li>
</ul>
</li>
</ul>
</li>
</ul>

How to highlight the Menu, when user clicks the Submenu by using php/javascript

I would like to Highlight the Menus Dynamically by using Php & javascript. Below code working for only Menu's. But I want when I click Submenu for that menu it should be Highlighted.Please check the Code once
<html>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active{
background: #4FA9E4; color:#FFF;
}
<ul id="id">
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul><li class="has-parent">a</li>
<li>b</li>
</ul>
</li>
<li class="has-sub">Patners
<ul><li>c</li>
<li>d</li></ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
Please Help me. Thanks in advance.

$('.has-parent').click(function() {
$(this).closest('.has-sub').addClass('active');
});
If I understood right, that's what you are looking.
BTW, you have some syntax problems.
You didn't close the <style>.
The <ul id="id"> is outside the <body>, isn't closed and apparently does nothing.
You are missing the <head>.
Final code:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
$('.has-parent').click(function() {
$(this).closest('.has-sub').addClass('active');
});
});
</script>
<style>
.active {
background: #4FA9E4;
color:#FFF;
}
</style>
</head>
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">
Company
<ul>
<li class="has-parent">a</li>
<li class="has-parent">b</li>
</ul>
</li>
<li class="has-sub">
Patners
<ul>
<li class="has-parent">c</li>
<li class="has-parent">d</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>

JQuery show / hide not working IE7

Show / hide does not work IE7.
In the other browsers work fine.
Help me please.
Am I doing something wrong?
<div id="secondary_nav" class="box">
<ul>
<li>test</li>
<ul class="sub-menu" style="height: 336px; display: none;">
<li>test</li>
</ul>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#secondary_nav ul li").hover(function() {
$(this).next(".sub-menu").show();
$(this).next(".sub-menu").hover(function() {
$(this).show();
}, function() {$(this).hide();}
);
},function() {$(this).next(".sub-menu").hide();}
);
});
</script>

You first need to fix your markup. A sub-menu goes in the the same li as the link that represents it:
<div id="secondary_nav" class="box">
<ul>
<li>
test
<ul class="sub-menu" style="height: 336px; display: none;">
<li>test</li>
</ul>
</li>
</ul>
</div>
Next you have some issues with your $.hover() where you're performing an additional nested hover within the over state of the first. Let's clean that up as well:
$(function(){
$("#secondary_nav > ul > li").hover(
function(){ $(".sub-menu", this).show(); },
function(){ $(".sub-menu", this).hide(); }
);
});
​Fiddle: http://jsfiddle.net/4KFac/

The HTML code is broken. You can't have an ul tag directly inside another ul tag.

It works fine for me http://jsfiddle.net/Ln8ep/1/
Try to use $(document).ready(function() {

Problem with Display of jQuery Menu

Menu does not display in line. Not sure how to call the CSS code. Also I want the alert to tell me which menu item was clicked.
<script type="text/javascript">
function get_list() {
$("#tabs").click(function(){
$(this).click(function(){
alert(this);
});
});
</script>
<style type="text/css">
#navbarID li {
display: inline;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li>Type 1</li>
<li>Type 2</li>
<li>Type 3</li>
</ul>
</div>
</body>
</html>

the html should be something like this.
<ul id='tabs'>
<li><a href='type1.html'>Type 1</a></li>
<li><a href='type2.html'>Type 2</a></li>
<li><a href='type3.html'>Type 3</a></li>
<li><a href='type4.html'>Type 4</a></li>
</ul>
the css part could be this:
ul#tabs { list-style: none; }
ul#tabs li { display: inline; }
the onclick that you want on jQuery is like this:
$('ul#tabs li a').click(function(){ alert('i was clicked!'); return false; });

alert($(this).html()); will tell you what the contents of that nav item are.
Maybe you should use <span> instead of <div> for inline.