How to automatically select menu item?

Navigation
0

I have the following code:

link

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 when I click on Menu 1 and click on tab 1, automatically select the first menu item you have and load its contents.

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

Thank you in advance.

    
asked by anonymous 29.09.2014 / 15:18

1 answer

1

Place in your iframe a tag name, shortly after clicking on 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 did not include jquery in the head of your HMTL 

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

Testifyou'reinthe.click()routine,putanalerttomakesureyourcodeisrunning.

$("#menuItem").click(function() {
   alert('Chegou !!'); // Para testar o evento...
   $("#if").attr('src','http://Exemplo/Example/main.php');
});
    
29.09.2014 / 15:26
Run SQL files inside subdirectories on Linux Error with Picasso library