How to automatically select menu item?

Asked

Viewed 600 times

0

I have the following code:

http://jsfiddle.net/xktjk03w/

HTML: 

 <!DOCTYPE html>
<head>
<title> Teste </title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">  
<div class="navbar-inner">
  <div class="container-fluid">
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </a>
    <a class="brand" href="#">Home</a>        
      <ul class="nav">
       <li class="active"><a href="#">Menu 1</a></li>         
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>          
      </ul>
  </div>     
        <ul class="nav nav-tabs">
        <li><a href="#tab1-0" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab1-1" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab1-2" data-toggle="tab">Tab 3</a></li>
        <li><a href="#tab1-3" data-toggle="tab">Tab 4</a></li>        
        </ul>                
 </div>
</div>  
<div class="container-fluid">
<div class="row-fluid"> 
    <div class="tab-content">
          <div class="tab-pane" id="tab1-0">
               <ul class="nav nav-list">
                  <li class="nav-header">Menu 1</li>
               <li><a href="#" id="menuItemUm">Menu Item tab 1</a></li>                      
              </ul>
          </div>
          <div class="tab-pane" id="tab2-0">
             <ul class="nav nav-list">
             <li class="nav-header">Menu 2</li>
             <li><a href="#" id="menuItemDois">Menu Item tab 2</a></li>                      
             </ul>
          </div>                       
        </div>
        <div class="span3">
        </div>      
  <div class="span9" id="divPrincipal">          
    <div class="row-fluid">      
        <iframe id="if" frameborder="0"></iframe>  
      <div class="span9"></div>
    </div>
  </div><!--/span-->
 </div><!--/row-->

 <hr/>

</div><!--/.fluid-container-->
</body>

JS:

$("ul.nav-tabs a").click(function (e) {
  e.preventDefault();  
  $(this).tab('show');
});
$("#menuItem").click(function() {
$("#if").attr('src', 'http://Exemplo/Example/main.php');
});

Example: I want that when you click on Menu 1 and click on tab 1, automatically select the first menu item you have and upload its contents.

I have tried to do with class ". active" but it is only selected, does not load.

Thanks in advance.

javascript jquery css

1 answer

1


Put a name tag in your iframe, right after clicking the link put the target to the iframe name.

 <a href="http://www.hiago.me" target="teste" >Teste</a>
 <iframe id="if" name="teste" frameborder="0"></iframe>

I also remember that you missed to include jquery in the head of your HMTL

 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

Do the test if it is entered in the . click() routine, put an Alert to make sure it is getting to the execution of your code.

$("#menuItem").click(function() {
   alert('Chegou !!'); // Para testar o evento...
   $("#if").attr('src','http://Exemplo/Example/main.php');
});

  • I think I expressed myself badly, look at the print: http://s29.postimg.org/fd7ywco53/menu1.png When I click on Tab 1, it is to automatically select Menu Item 1, and load the content in iframe. That way you said I couldn’t get.

  • So I got it, could you upload your code to Jsfiddler or elsewhere for me to analyze how it could be done? You can do jQuery but I need to see its structure...

  • Hello Hiago, I already solved my problem. I chose to do without tabs. Thank you.

  • For no good it helped..

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.