I am having menu links on one page & tab-container on another page. I want when someone click on one of the menu link it should go the page in which tab-container is there and show active tabpane of which menu has been clicked
Eg. Menu name: ab, ba, cd
Tab name: ab, ba, cd
So I want when user click on menu 'ba' it should go to the page and showing the 'ba' as active tab and so on
Help me out using javascript
It would be really helpful if you post sample of your code. If you want to identify which tab is clicked on another page, you probably need to pass menu name in query string as below.
<body>
<ul class="no-list">
<li >
<a href="page2.aspx?menu=ab" >ab</a>
</li>
<li >
<a href="page2.aspx?menu=cd" >cd</a>
</li>
</ul>
and call below javascript function on load of another page. You will get the value of clicked menu. now you need to write your logic to show active tabpane.
function onloadcheck(){
var queryString = location.search.substring(1);
alert(queryString.split('=')[1]);
};
Related
I'm having one problem is:
I've one javascript running on all pages and I want to keep it active even if you change pages inside of the website (not refresh) but the problem is that I've one menu toggle and every time that I changed the page, the script starts again. so I changed my code menu and added an attribute to link rel="history".
After doing that, the script works without interrupts, but every time I click on the menu link, the menu toggle doesn't close... remains open when I change the page. and cannot know why. anyone can help me? Thanks in advance.
<a class="toggle-menu">
<i></i>
<i></i>
<i></i>
</a>
<div class="menu-drawer">
<ul>
<li>main</li>
<li>Press</li>
<li>Contacts</li>
</ul>
</div>
$(function() {
$(".toggle-menu").click(function() {
$(this).toggleClass("active");
$('.menu-drawer').toggleClass("open");
});
});
I have a RouterLink used inside a li tag and which basically makes a simple dropdown menu, When options are present on the dropdown menu I can click on the text to go to the next page but not click anywhere else inside the box, instead I want to be able to click on the whole "bar" which is the li tag to be able to go to the page
<ul>
<li v-for="product in products">
<RouterLink :to="/product"> {{product}} </RouterLink>
</li>
</ul>
this creates a dropdown like this:
|product name |
|product 2 name |
Now clicking on only text works but I want to be able to click inside the box as well. How do you solve that.
Another question is how do I close the dropdown when it is clicked anywhere else.
The intuitive solution is to add click event handler to the li tag and use $router.push('/product') :
<ul>
<li v-for="product in products" #click="$router.push('/product')">
{{product}}
</li>
</ul>
I'm using the following GetUIKit: https://getuikit.com/
I want to use the UIKit and JS to do the following:
When a button named "Next" is pressed, the active item on an unordered list is changed to the subsequent item and that content appears. I would also like for a second button to appear, "Previous", if the active item is anything other than the first item in the UL.
Here is what I have so far:
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
<li>Welcome</li>
<li>Get Involved</li>
<li>Sign-Up</li>
</ul>
<ul class="uk-switcher uk-margin">
<li>Welcome!</li>
<li>Here is how you can get involved!</li>
<li>Fill out the following form to be added to our contact list!</li>
</ul>
<button class="uk-button uk-button-default">Previous</button>
<button class="uk-button uk-button-default">Next</button>
UIKit provides navigation from the subnavs. In other words, I can click on those and it will pull up the corresponding item from the subsequent UL.
My issue is how I do this using a Next and Previous button. Are buttons the best choice? If so, using JS, what is the best way to go about manipulating the HTML/CSS to change what appears based on user's selection of "Next" or "Previous"?
I suggest you to use "Tab" in Uikit, Just use that tabbing name as Next/Prev
<ul uk-tab>
<li class="uk-active"></li>
<li></li>
<li class="uk-disabled"><a></a></li>
</ul>
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.
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.