CODEWITHSUNDEEP
javascript
Paweł Babik
Paweł Babik

Reputation: 25

JavaScript how to choose of main view

Here is a code http://jsfiddle.net/uyDbL/ . Ultimately I want to load in different page one of this links as visible from start(different links must be visible in different pages). Now page doesn't load anything, just blank space. Thanks so much for help. I'm a beginner in javascript and programming too. Please for finished code.

<table border="0">
<tr>
<td>
<hr>
<a href="#m1">fea1</a><br><hr>
<a href="#m2">fea2</a><br><hr>
<a href="#m3">fea3</a><br><hr>
<a href="#m4">fea4</a><br><hr>
<a href="#m5">fea5</a><br><hr>
<a href="#m6">fea6</a><br><hr>
<a href="#m7">fea7</a><br><hr>
<a href="#m8">fea8</a><br><hr>
<a href="#m9">fea9</a>
<hr>
</td>
</tr>
</table>


<div class="target">

</div>


<div id="m1">dasdasdasd</div>
<div id="m2">dadasdasdasd</div>
<div id="m3">sdasdasds</div>
<div id="m4">dasdasdsad</div>
<div id="m5">dasdasd</div>
<div id="m6">asdasdad</div>
<div id="m7">asdasda</div>
<div id="m8">dasdasd</div>
<div id="m9">dasdasdsgaswa</div>

Upvotes: 0

Views: 82

Answers (1)

imvain2
imvain2

Reputation: 15857

If you give the link the class of active, this code will look for that class and set the preview content as that on load.

$(document).ready(function(){
    $('a').on('click',function(){
        var aID = $(this).attr('href');
        var elem = $(''+aID).html();
        
        $('.target').html(elem);
    });
    
    el = $("a.active");
    if(el.length > 0){
        $('.target').html($(el.attr("href")).html());
    }
    
});
a{
    text-decoration:none;
    color:black;
}

.target{
    width:50%;
    height:200px;
    border:solid black 1px; 
}

#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{
    display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr>
<td>
<hr>
<a class="active" href="#m1">fea1</a><br><hr>
<a href="#m2">fea2</a><br><hr>
<a href="#m3">fea3</a><br><hr>
<a href="#m4">fea4</a><br><hr>
<a href="#m5">fea5</a><br><hr>
<a href="#m6">fea6</a><br><hr>
<a href="#m7">fea7</a><br><hr>
<a href="#m8">fea8</a><br><hr>
<a href="#m9">fea9</a>
<hr>
</td>
</tr>
</table>


<div class="target">

</div>


<div id="m1">dasdasdasd</div>
<div id="m2">dadasdasdasd</div>
<div id="m3">sdasdasds</div>
<div id="m4">dasdasdsad</div>
<div id="m5">dasdasd</div>
<div id="m6">asdasdad</div>
<div id="m7">asdasda</div>
<div id="m8">dasdasd</div>
<div id="m9">dasdasdsgaswa</div>

Upvotes: 1

Related Questions