Home/ Questions/Q 4321120
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T08:42:30+00:00

It was working earlier today… :S but now, whenever I click a link in

  • 0

It was working earlier today… :S but now, whenever I click a link in the tab, it opens in an entirely new page, regardless of whether the tab contents are embedded in the current page, or referenced from another.

Here’s my code, and thanks in advance!

<link rel="stylesheet" href="style/style.css" media="screen,projection" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<!--  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/jquery-ui.min.js" type="text/javascript"></script>-->
    <script type="text/javascript">
  $(document).ready(function() {
    $("#tabs").tabs();
  });
  </script>

<!----Javascript edited in below----->
      <script type="text/javascript">
  $('#payday').tabs({
    load: function(event, ui) {
        $('a', ui.panel).click(function() {
            $(ui.panel).load(this.href);
            return false;
        });
    }
}); 
</script>
</head>

<body>
    <div id="wrapper">
        <div id="container">
            <div id="header">
                <div id="headercon">
                </div><!--headercon-->
                <div class="clear"></div>
            </div><!-- header -->

            <div id="tabs">
            <div id="navigation">

                    <ul>
                        <li class="selected"><a href="#nav1"><span>nav1</span></a></li>
                        <li><a href="form2.php"><span>nav2</span></a></li>
                        <li><a href="form3.php"><span>nav3</span></a></li>
                    </ul>

                <div class="clear"></div>
            </div><!-- navigation -->

            <div id="info">
            <div class="top"></div>
            <div id="payday" class="middle">
<h3>Get a quick quote NOW! <a href="form2.php">google</a></h3>
<div class="information">
<form action="ajax.php" id="submit" method="post">
<p class="enter"><span>Email address:</span><br><input id="email" class="email" type="text" name="email" value="Enter your email" input onclick="this.value='';" /></p>
<p class="date"><span>Date of birth:</span><br><input id="dd" class="day" type="text" name="dd" value="DD" input onclick="this.value='';"/><input id="mm" class="month" type="text" name="mm" value="MM" input onclick="this.value='';"/><input id="yyyy" class="year" type="text" name="yyyy" value="YYYY" input onclick="this.value='';"/></p>
<p class="submit"><input class="button" type="submit" value="" /></p>
</form>
<div class="clear"></div>
</div><!--information-->
<div class="success" style="display: none;">added.</div>  
<div class="clear"></div>
</div>
                    <div class="clear"></div>
                </div><!--middle-->
                                <div class="clear"></div>
            </div><!-- navigation -->
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In the code included in your link, you’re missing the # on payday:

    <script type="text/javascript">
$('#payday').tabs({ // <<< see here
    load: function(event, ui) {
        $('a', ui.panel).click(function() {
            $(ui.panel).load(this.href);
            return false;
        });
    }
});
</script>

    However, I’m not experiencing any issues with the tabs coming or the page going to the link instead. I’m using FF4.

    Your approach is flawed using .tabs() to load content like this. Just use .load() or .get().

    Example:

    <html>
<head>
<style type="text/css">

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#single a').click(function(e){
        $('#target').load(this.href);
        return false;
    });
});

</script>
</head>
<body>
<div id="single">
    <a href="files/test1.php">Test 1</a>
    <a href="files/test2.php">Test 2</a>
    <a href="files/test3.php">Test 3</a>
</div>
<div id="target"></div>
</body>
</html>

    The next thing you would need to do is handle the links within the loaded content. For example:

    $(document).ready(function(){
    setLink('single');
});

function setLink(id){
    $('#'+id+' a').click(function(e){
        $('#target').load(
            this.href,
            function(){
                setLink('target');
            }
        );
        return false;
    });
}

    See http://jfcoder.com/test/load.php.

    EDIT 2

    To load the first A link in the list onDOMReady (instead of onLoad):

    <html>
<head>
<style type="text/css">

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    setLink('single');
    $('#target').load($('#single a:first').attr('href'));
});

function setLink(id){
    $('#'+id+' a').click(function(e){
        $('#target').load(
            this.href,
            function(){
                setLink('target');
            }
        );
        return false;
    });
}

</script>
</head>
<body>
<div id="single">
    <a href="files/test1.php">Test 1</a>
    <a href="files/test2.php">Test 2</a>
    <a href="files/test3.php">Test 3</a>
</div>
<div id="target"></div>
</body>
</html>

    See http://jfcoder.com/test/load.php also.

    • 0