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.
Related
So what I'm trying to accomplish is I'm building a website using Wordpress. I have a menu and one of the items is "Products" under products I have 4 items, electronics, cars, house supplies, and other. For this example I'm focusing on electronics. So under electronics i have another submenu. So this is the 3rd level, which looks like the code below.
<li class="dropdown menu-products"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="http://mywebsite/products/">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu menu-electronics">Electronics
<ul class="dropdown-menu">
<li class="menu-tv">Tvs</li>
<li class="menu-phones">Phone</li>
<li class="menu-games">Games</li>
<li class="menu-other">Other</li>
</ul>
</li>
Now when I click on any of the links on the 3rd level it will take you to the parent page and open up an accordion for that id. So I set that up and it works. However the problem I'm having is since all of these items example (tv, phones, games, others) are technically on the same page. When I click on one of the links, and i go back to the menu, all the links in the 3rd level are active. So if I were to click on a different item, the url changes but the page doesn't refresh nor does the new target accordion open. Here is what I have so far for this area. I'm assuming I have to add something to this script to check every time a link is clicked?
<script type="text/javascript">
(function( $ ) {
$(document).ready(function() {
var anchor = window.location.hash.replace("#", "");
$(".collapse").collapse('hide');
$("#" + anchor).collapse('show');
});
})( jQuery );
</script>
Tried to set up a JSfiddle to show this but failed at it.
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
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 have a navigation menu at the top of my webpage with a drop down. For example the service page under nav has a drop down of our other services that go to a service page with a tab structure like so:
<section class="tabs">
<ul class="tab-nav">
<li class="active">First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
<div class="tab-content">
<p>Here's the first piece of content</p>
</div>
<div class="tab-content active">
<p>My tab is active so I'll show up first! Inb4 tab 3!</p>
</div>
<div class="tab-content">
<p>Don't forget about me! I'm tab 3!</p>
</div>
</section>
and I would like like to make it so that I could use my achor tags on my home page to link directly to tab 3 or 1 or 2 of my choosing as well as when I refresh the page with the tabs the tab doens't jump to the active tab. How can I do this with javascript? I attempted it with this hash check function bit of code:
$(function () {
$(".tab-content").hide().first().show();
$(".tab-nav li:first").addClass("active");
$(".tab-nav a").on('click', function (e) {
e.preventDefault();
$(this).closest('li').addClass("active").siblings().removeClass("active");
$($(this).attr('href')).show().siblings('.tab-content').hide();
});
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');
});
The problem is, is that when I click the second tab, it shows the content on the first tab... but tab 3 looks fine. But when I click on tab 3 and then go back to tab 2, no content displays under tab 2. Maybe someone can simply my code for what I'm trying to accomplish?
ps. I'm using the gumby framework for my tabs
First of all, $($(this).attr('href')) isn't going to find anything, so none of the tabs would be working anyway.
Apart from that, the hash linking code seems to be fine.
I've rewritten the code so that it works now below.
Link: http://jsfiddle.net/s8Ttm/2/
Code:
$(".tab-nav a").bind('click', function (e) {
e.preventDefault();
$(this).parents('li').addClass("active").siblings().removeClass("active");
$('.tab-content').removeClass('active').hide();
console.log($('.tab-content:eq('+$(this).index()+')'));
$('.tab-content:eq('+$(this).parents('li').index()+')').addClass('active').show();
});
$('.tab-nav a').first().click();
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');
I have a few tabs on a page that have this markup
<div id="holiday-details-nav">
<ul>
<li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
The hiding and showing of the content in these tabs are controlled by some JQuery code that begins thus
$(document).ready(function () {
// Hide all tabs apart from the overview
$('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rates').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-information').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide();
...
The problem is that if I add, remove or rename tabs (like I have just done), then I have to change all this code. What I would like is to add, rename or remove as many tabs as I like but to not have to modify this JQuery code.
I'm not really looking for someone to code a solution for me but rather wanted to start a discussion on tools, techniques etc that can be used to avoid this sort of naming dependency.
EDIT
I also have this bit of ugliness for when a tab is clicked.
$('#holiday-details-nav ul li a').click(function () {
// Remove active class from all links
$('#holiday-details-nav ul li').removeClass('active');
//Set clicked link class to active
$(this).parent().addClass('active');
// Set variable currentTab to value of href attribute of clicked link
var currentTab = $(this).attr('href');
// Hide all tabs
$('#holidaydetails-description-imagecontainer').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-overview').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rates').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-information').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide();
$('#holiday-details-bottom').show();
$('#holiday-details-left-booknow').show();
// Show div with id equal to variable currentTab
$(currentTab).show();
$('#holidaydetails-description-imagecontainer').show();
return false;
});
Thanks,
Sachin
You could assign a common CSS class, say tab, to every li except overview, and then use a jQuery class selector to hide them all. For example:
<div id="holiday-details-nav">
<ul>
<li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="tab holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="tab holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="tab holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="tab holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
And then, to hide every tab except overview:
$("holiday-details-nav .tab").hide();
Or the other way around, that is, add a specific class to overview, and hide every other tab:
<div id="holiday-details-nav">
<ul>
<li><a class="overview holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
Then, to hide, select all tabs, and exclude overview using .not():
$("#holiday-details-nav a").not(".overview").hide();
When dealing with tabs, especially in the setup you have (where the href attribute has the id of the div related to it), you don't need to hardcode anything, use the title attribute, or use any extra classes. Look at this:
http://jsfiddle.net/FAM2s/2/
All it does it find all of the tabs' detail divs and hide them all, then only show the one related to what was just clicked.
As long as you set the correct href attributes for the links, and set the corresponding divs with those id's, it will work, no matter how many tabs you add/remove whenever you want.