The master page have some link.The static part has a list of anchor.onclick the content part is change.
How to make a highlight to the click anchor tag?
e.g
master page content
HOME PROFILE MASSEGES
content part here
I want to change the background when I clicking perticular anchor tag. on the static view.
Suppose this is the code in masetr page. static code for all pages.
<div id="menu">
<ul>
<li class="menu-item">Home</li>
<li class="menu-item"><a href="#" >Profile</a></li>
<li class="menu-item"><a href="#" >Messeges</a></li> </ul>
</div>
I want to clicking on particular event, the background of that anchor has to change.
You could use jQuery for this.
$("#yourTagId").click(function(){
$("#yourTagId").css('background-color','yellow');
});
In your case you should give al li tags an unique ID
Related
I am trying to implement the smooth scroll when user click on the anchor tag then it will scroll and reach the target. it's working perfectly with all the anchor tag.
Now my issue is,
I have two tabs called as part1 and part2. There is no data in part1 but I have 3-4 anchor tags in the part2. I have to set a smooth scroll for that.
I don't want a smooth scroll when the user clicks on part1 or part2.
<div class="tabs">
<ul class="tab_click">
<li class="current"><a href="#part1" >Part1</a></li>
<li>part2</li>
</ul>
</div>
I need a smoth scroll when user click on the below anchor tag.
<ul>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Terms</li>
</ul>
Please check below link, I added my whole code here.
https://codepen.io/Narendra_verma/pen/bjgXyK
Would you help me out in this issue
you can add main class for smooth scrolled link
at line 30
$(document).on("click", ".main_tab a[href^=#]", function(e) {
I do not possess much knowledge on MVC, JavaScript or Bootstrap. But here I am stuck at something working on all the three. I have a Layout page consisting of a navigation bar styled using Bootstrap. Idea taken from here. Markup given below.
<div id="innerTab">
<ul class="nav nav-pills">
<li class="active">
Index
</li>
<li>
About
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active">
#RenderBody()
</div>
</div>
</div>
Since this is a Layout View, I want to be able to load the content from the other Views in the tab content area. Due to which, I have to make use of #RenderBody() which cannot be called more than once. I am not really sure what data-toggle does exactly but clicking on About had no impact whatsoever. Then I realised that I had to manually set the active class on the clicked tab via JS. So this is what I did.
$(".nav li").on("click", function() {
$(".nav li").removeClass("active");
$(this).tab('show');
})
Now, the selected tab did become active. However, for some unknown reason, when clicked on About, it does not navigate to the About page but stays at Index. Because of which I had to change it to #Html.ActionLink as given below.
#Html.ActionLink("About", "About", "Home")
This successfully navigated to the About page. However, the About tab becomes active for a second and quickly switches to the Index tab but displays the content from the About page. like below.
Thought adding data-toggle would fix this. So I followed the answer given here.
#Html.ActionLink("About", "About", "Home", new { data_toggle="tab"})
And then it's back to square one. Except for the fact that it highlights the tab I select, it does nothing.I am lost!! Where am I going wrong?
First, #Url.Action(" Index ", "Home ") isn't working because you have extra spaces around your Action and Controller arguments.
It should be #Url.Action("Index", "Home")
"The About tab becomes active for a second and quickly switches to the Index"
That's because, on click, jQuery click event adds a class. But MVC redirects to a new page and the _Layout is rendered again with the default active tab Home.
So to the top of your About.cshtml,
#{
ViewBag.Title = "About";
ViewBag.ActiveNav = "About"; // you'll need to add this to Home as well
}
Then change the Layout to:
<ul class="nav nav-pills">
//Based on the "ActiveNav" value, "active" class will be added
<li class="#(ViewBag.ActiveNav == "Home" ? "active" : "")">
#Html.ActionLink("Index", "Index", "Home")
</li>
<li class="#(ViewBag.ActiveNav == "About" ? "active" : "")">
#Html.ActionLink("About", "About", "Home")
</li>
</ul>
Now the active class is added to particular li, based on the page.
I have used "enscroll" js scroll bar in my page. http://enscrollplugin.com/#demos
<div id="enscroll_name">
<ul>
<li id="p1">product1</li>
<li id="p2">product2</li>
<li id="p3">product3</li>
<li id="p4">product4</li>
<li id="p5">product5</li>
</ul>
</div>
On Page load the product3 need to be in the visible area. I used <a name="p3"></a> for this. But in query how to achieve this? In html we used anchor name tag like <a name="p3"></a>. But in this script how to achieve this?
You can use .scrollTop() jquery function to visible whatever the area that you want inside the div.
Try like this..
$('#yourdiv').scrollTop($("p[name='p2']").height());
Check the sample fiddle
I want to be able to automatically scroll down when a link in the navbar is clicked. Right now when links in the navbar are clicked the page reloads and returns to the top of the page. I used JQuery to hide the sections that aren't selected now I need to add the scroll method when a link is clicked. OR build it so that when the navbar link is selected, the page reloads with the new unhidden section, and the page moves down to the navbar. I would like to see both methods if possible.
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
You need to provide an ID for the link to point to. If you only link to '#', the page will simply reload.
This link will jump to the corresponding ID on the H2
Click to move to ID 'myLink'
<h2 id="myLink">My link</h2>
As for the jQuery, did you use .hide(), .toggle() or .remove()?
.hide() does exactly that, but doesn't delete it from the DOM.
.toggle() switches between visible and invisible.
.remove() actually deletes your target from the DOM, and it can't be manipulated after that.
I am trying to change the class of a tab on the dashboard depending upon the page selected.
I have 3 tabs in the dashboard like
<div>
<ul class="menu">
<li class="MenuDashboard"><a href="#" >Dashboard</a></li>
<li class="MenuSearch">Search</li>
<li class="MenuAccountSetup">Account Set up</li>
</ul>
</div>
Now I want to highlight the tab when I select that particular tab. By default the 'Dashboard' tab should be highlighted. I have a style class called "current" which highlights the tab.
Please advise.
This should work:
$('.menu li').click(function() {
$(this).addClass('current').siblings().removeClass('current');
});
// Clicks on the first menu item to style it
$('.menu li').eq(0).click();